vue 父子界面元件傳值

廢話不多說直接上代碼！

為什麼不能在子元件内直接指派 1.控制台會報錯 2.指派後父類同步不了資料 ；

/ 子元件中
<template>
  <div>
    <span>{{Arr}}</span>
    <span>{{child}}</span>
    <input type="button" value="點選觸發" @click="send">
  </div>
</template>
<script>
  export default {
 /*擷取傳值
    * 官方文檔
    * https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%80%E6%9C%89-property
    * String Number Boolean Array Object Date Function Symbol
    * */
props: {
Arr: Array,// 參數傳遞 接收 數組
},

    data () {
      return {
        child: '我是子元件的資料',
childTiele: '我是子元件的資料Tiele',

      }
    },
    methods: {
      send () {
      // 如果傳多個值就用逗号隔開 a, b, c  
        this.$emit('fromChild', this.child)

//【這裡調用的是父類函數】 如果需要父子同步資料的情況下可以直接
  this.$emit('SetArr', ['1','2'])
      }
    }
  }
</script>


           

// 父元件
<template>
  <div>
    <span>{{name}}</span>
    // 在父元件中監聽 fromChild事件  這裡還可以傳遞 函數 直接到子元件 
    <child @fromChild="onFromChild" :Arr="Arr" ref="child1"  ></child>

  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: '',
Arr:[],//參數傳遞 數組
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子元件傳過來的值
        // 如果傳過來多個值就用逗号隔開去接收 data1, data2, data3
        this.name = data
      }
//接收傳遞資料重置 數組
      SetArr(arr){
      this.Arr = arr;



      },

setChild(){
//父元件變更子元件資料

 this.$refs.child1.childTiele= '父元件變更子元件資料Tiele';
},

    }
  }
</script>