前端培训丁鹿学堂：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,
}

每天都分享一点小知识点，在公交，地铁上翻一番，温故知新，或者有初步认识，对学习和工作都是很有帮助的！