VueDay06(组件反向传值，多层传值 )

什么是单向数据流

指的是父组件通过属性传值给子组件如果子组件修改了传过来的值，父组件的对应的属
性是不会改变的，也就是说，渲染到页面的父组件数据是不会变的，所以，有父组件传
给子组件的值不能反向修改(响应),但是父组件数据改变是可以改变子组件的值的,数
据是单向的.

事件修饰符

@事件名.stop  阻止冒泡;

@事件名.prevent 阻止默认事件;

@事件名.capture 监听事件捕获;

@事件名.self  阻止事件捕获、冒泡时触发函数，只能在目标阶段触发该函数如目标阶段节点不是该事件绑定的节点就不会触发函数;

@事件名.once 事件触发一次后就会解绑;

@事件名.native组件事件设置为官方提供的原生事件

:msg.sync='msg' 如果单单是修改父组件属性数据，就可以用这个修饰，父组件就可以不用写触发函数了

反向传值方式

父组件给子组件传值可以用自定义属性传值，用props接收但是这样做当子组件修改
传过来的值是不会修改父组件的值的，换句话说就是页面父组件数据不会发生变化;
解决方案:反向传值(可以理解为双向绑定)

方式一：父组件用自定义事件即定义事件处理函数(@自定义函数名='事件处理函数')
子组件用this.$emit('函数名','传参')设置自定义函数的触发条件这样父组件可
以接收到条件触发时传过来的数据，进而修改父组件的值，这样达到子组件修改父组件
传的值，且页面数据变化.
用法:
父组件:<box @myclick='fn' :data='msg'></box>
fn在methods里面
子组件:在条件触发的函数代码块写 this.$emit('myclick','修改后的值');

示例:

<!-- 父组件:首先导入组件再注册用于template标签中 如:box组件 结合自定义属性传值-->
<template>
 <box @myclick='fn' :data='msg'></box>
</template>
<script>
export default {
     
     
    data(){
     
     
    return {
     
     
        msg:'父组件数据'
    }
},
 components:{
     
     
        box,
    }
  methods:{
     
     
      fn(){
     
     
          //事件处理函数代码块
      },
  } 
}
</script>
 <!-- 子组件 利用this.$emit('自定义函数名','参数') -->
<template>
    <div>
        <h3>父组件传过来的值--- {
  
  {data}}</h3>
        <button @click="fn" >子组件修改父组件的值</button>
    </div>
</template>
<script>
export default {
     
     
    props:['data'],
    methods: {
     
     
        //自定义事件触发条件
        fn(){
     
     
            this.$emit('myclick','修改后的值');
        }
    },
}
</script>

方式二:v-model语法糖 原理方式一相同,v-model底
层绑定了input事件以及value属性，可以利用这一
点，做到反向传值,只不过子组件只能用value接收
数据，以及input进行事件触发，父组件不写事件
处理函数;

示例:

<!--父组件 如:box2 -->
<template>
<!--msg是绑定的data中的属性 -->
 <box3 v-model='msg'></box3>
</template>
<script>
export default {
     
     
    data(){
     
     
    return {
     
     
        msg