vuejs利用props，子組件修改父組件的數據，父組件修改子組件的的數據，數據類型爲數組

博文參考 傳送們 點一點

父組件：

 <template>
  <div>
    <aa class="abc" v-model="test" ></aa>  
    <!-- // 組件中使用v-model -->
      {{'外面的值：' + test}} 
      <!-- // 這兒試驗test與內部msg值爲雙向綁定關係 -->
    <button @click="fn">
      外面改變裏面
    </button>
    
  </div>
</template>

<script>
import aa from './test.vue'
export default {
  data() {
    return {
      test: []
    }
  },
  methods: {
    fn() {
      this.test.push('d')
    }
  },
  components: {
    aa
  }
}
</script>

　　

<template>
  <div>
    <ul>
      <li>{{'裏面的值：'+ msg}}</li>
      <button @click="fn2">裏面改變外面</button>
    </ul>
  </div>
</template>

<script>
  export default {
    model: {    // 使用model， 這兒2個屬性，prop屬性說，我要將msg做爲該組件被使用時（此處爲aa組件被父組件調用）v-model能取到的值，event說，我emit ‘cc’ 的時候，參數的值就是父組件v-model收到的值。
      prop: 'msg',
      event: 'cc'
    },
    props: {
      msg: [Array]
    },
    data() {
      return {
        value: []
      }
    },
    methods: {
      fn2() {
        this.value.push('c')
        this.$emit('cc', this.value)
      }
    }
  }
</script>