一 . v-model

v-model可以實現資料的雙向繫結，v-model只是語法糖，真正的實現形式：

<input type="text" :value="message" @input="message = $event.target.value">

1.將輸入框繫結到message變數上，這只是單向的，改變message的值可以改變input的value，但是改變input的輸入不會改變message

2.監聽input事件，當輸入類內容為不同的輸入元素使用不同的屬性並丟擲不同的事件。

例如：text和textarea元素使用value屬性和input事件，checkbox和radio使用checked和change事件，select使用value和change事件。

通過上述分析，預設情況下，一個元件上的v-model會把value用作prop且把input用作event。所以當我們在一個自定義元件上使用v-model並不能實現雙向繫結，因為自定的組建並沒有預設的value和input事件。在使用時，我們需要按照上面那樣顯示的去宣告定義這些東西，可以在定義元件的時候，制定prop的值和監聽的事件。

在子元件中：

   // 子元件
    model: {
        prop: 'uname',
        // 隨便命名事件，對應下面$emit即可
        event: 'changeXXX'
    },
    props:{
       uname:{
          
 
default:'',
          type:String
       }
    },
    methods: {
        updateVal(val){
　　　　　　　　// 修改資料傳遞給父元件
            this.$emit('changeXXX',val)
    }

  // 父元件
 / name是父元件中的屬性
<子元件 v-model="name" ></子元件>

等價於

<子元件 :uname='name' @changeXXX='val => {foo = val}' value='some value'></子元件>

二. .sync修飾符

使用.sync修飾符可以直接將父元件中的資料傳遞給子元件，並子元件修改資料來改變父元件的狀態

//父元件將age傳給子元件並使用.sync修飾符。
<MyFooter :age.sync="Fage"></MyFooter>
//子元件
props:['age'],
mounted () {
    console.log(this.$emit('update:age',1234567));
 }

三. provide和inject ： 跨級訪問父元件的資料

他們是配合使用的，provide將父元件中的資料傳遞給下級，inject在需要子元件或孫元件中注入資料。

通過該方法可以實現跨級訪問父元件的資料。

// 父元件 正常引入子元件
  provide() {
    return {
      send: this.val, // 傳給子元件
      value: this.data // 傳給孫元件
    }
  }

// 子元件

inject: ['send']

// 孫元件
inject: ['value'],

四. $attrs

中介軟體

$attrs其實就是多級元件中的props，他就像一箇中間元件，用來傳遞爺元件給孫元件的資料，使用的時候只需要給父元件的孫元件配置 v-bind=“$attrs”,然後再爺元件中傳入孫元件所需的資料，孫元件正常接收。

//父元件
<template>
  <div>
    <Child  :val="val" />
  </div>
</template>
import Child from './child.vue'；
export default {
  components: { Child },
  data() {
    return {
      val: '父元件的data'
    }
  }


// 子元件
<template>
  <div>
    <SunChild v-bind="$attrs" />
  </div>
</template>
<script>
import SunChild from './sunChild.vue';
export default {
  components: { SunChild },
}


// 孫元件
<template>
  <div>
    孫子元件--{{val}}
  </div>
</template>
<script>
export default {
  props: ['val'],
}