vue父子组件传参（二）

子组件通过watch监听父组件的props的内容

props的属性可以被watch监听到。我们可以在props改变的时候通过watch 去修改子组件的一些值

 props:{
   content:{
      type:String, 
       default(){
        return '缺省内容'
      },
   }
},
 watch:{
    content(val){
        this.text = val
        console.log(val)
    }
},

父子组件通过$attr传值

父子组件的传值方式有多种，通过子组件的$attr也可以。

1. 父组件上直接加class或者id
2. 子组件通过$attr会直接接收在自己的最外层元素上。,inheritAttrs:false设置不自动接收

   <Dbutton :content = "content" class="btn"/>
   // 子组件
   <div @click="text = 123" :class="$attrs.class"> {{text}}</div>
   export default {
   inheritAttrs:false,
   }

   组件间的事件传递$attrs

   父子组件之间可以传递事件。通过$attrs去接收，并且事件虽然写在父组件上，但是却是子组件触发的
   父组件定义事件并传递给子组件

   <Dbutton :content = "content" @click="handle"/>
   //===
   methods:{
      handle(){
        console.log(11)
      }
    },

   子组件接收

   <div v-bind="$attrs" > {{content}}</div>
   // ====
   export default {
   inheritAttrs:false,
   }