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>