<template>
  <div class="home">
    <!-- 此处只需在平时常用的单向传值上加上.sync修饰符 -->
    <HelloWorld :msg.sync="parentMsg" :msg2.sync="parentMsg2" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
    name: 'home',
    data(){
        return{
            parentMsg:'test',
            parentMsg2:'test2'
        }
    },
    watch:{
        // 监听数据的变化输出 newV 改变的值，oldV 改变之前的值
        parentMsg(newV,oldV){
            console.log(newV,oldV);
        },
        parentMsg2(newV,oldV){
            console.log(newV,oldV);
        }
    },
    components: {
        HelloWorld
    }
}
</script>

<template>
    <div>
        <h1>{{ msg }}</h1>
        <h1>{{ msg2 }}</h1>
        <button @click="fn()">点击</button>
    </div>
</template>
<script>
 
export default{
    props:{
        msg:String,
        msg2:String
        
    },
    methods:{
        fn(){
            let some = '张三';
            let some2 = '李四';
            // 将这个值通过 emit
            // update为固定字段，通过冒号连接双向绑定的msg，将some传递给父组件的v-model绑定的变量
            this.$emit('update:msg',some);
            this.$emit('update:msg2',some2);
        }
    }
}
</script>

<template>
 <HelloWorld :msg.sync="parentMsg" :msg2.sync="parentMsg2" />
 <!-- 等价于 -->
 <HelloWorld :msg="parentMsg" @updata:msg="parentMsg = $event"></HelloWorld>
 <!-- 这里的$event就是子组件$emit传递的参数 -->
</template>