vue父元件和子元件間怎麼進行資料傳遞

★ 父元件傳遞資料給子元件(可以通過props屬性來實現)：
由於元件例項的作用域是孤立的。這意味著不能 (也不應該) 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 props 選項；
在模板中，要動態地繫結父元件的資料到子模板的 props，與繫結到任何普通的 HTML 特性相類似，就是用 v-bind。每當父元件的資料變化時，該變化也會傳導給子元件：

//父元件
//引入的add-widget元件
//使用 v-bind 的縮寫語法通常更簡單：
<add-widget :msg-val="msg"> //這裡必須要用 - 代替駝峰
 

// HTML 特性是不區分大小寫的。所以，當使用的不是字串模板，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名，當你使用的是字串模板的時候，則沒有這些限制 
</add-widget>
data(){
    return {
        msg: [1,2,3]
    };
}
//如果你想要用一個物件作為 props 傳遞所有的屬性，你可以使用不帶任何引數的 v-bind (即用 v-bind 替換掉 v-bind:prop-name)。例如，已知一個 todo 物件：
todo: {
  text: 'Learn Vue'
 
,
  isComplete: false
}
//模板裡：
<todo-item v-bind="todo"></todo-item>
//等價於：
<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

//子元件通過props來接收資料：
//方式1：
props: ['msgVal']
//方式2 :
props: {
    msgVal: Array //這樣可以指定傳入的型別，如果型別不對，會警告
}
//方式3：
props: {
    msgVal: {
        type: Array
 
, //指定傳入的型別
        //type 也可以是一個自定義構造器函式，使用 instanceof 檢測。
        default: [0,0,0] //這樣可以指定預設的值
    }
}
//注意 props 會在元件例項建立之前進行校驗，所以在 default 或 validator 函式裡，諸如 data、computed 或 methods 等例項屬性還無法使用

★ 子元件與父元件通訊
//由於prop是單向資料傳遞的，為了防止子元件無意修改了父元件的狀態，所以子元件想要給父元件傳遞資料，vue是不允許的，這時候我們可以通過觸發事件來通知父元件改變資料，從而達到改變子元件資料的目的

//子元件:
<template>
    <div @click="up"></div>
</template>
methods: {
    up() {
        this.$emit('upupEvent','hehe'); //主動觸發upupEvent方法，'hehe'為向父元件傳遞的資料
    }
}