标签：传值 ring 网站 meta dom lib ons list pat
今天在用平时很少用到的传值方式，是V2.4以后新加入属性$attrs $listener 以及inheritAttrs.
总结：这样形式的代码适合套娃模式的组件传递，却不适合兄弟组件的传值，那样的传值方式，需要创建一个事件总线，说白了就是新new一个空的vue，详见，我的第二篇日志《vue 组件传值踩坑日记 2》
废话不多说，直接上代码，大家可以边看注释边测试一下效果吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="app"> <com1></com1> </div> <template id="com1"> <div> <div>我是祖组件</div> <br> <span>我是修改后的祖组件数据:{{curTitle}}</span> <com2 :g-msg="msg":g-title="title" @setTitle="setTitle"></com2> </div> </template> <template id="com2"> <div> <div>我是父组件</div> <com3 v-bind="$attrs" v-on="$listeners"></com3> </div> </template> <template id="com3"> <div> <div>我是孙组件</div> 收到祖组件的数据：{{gTitle}} <br> <button @click="setPtitle"> 发送给祖组件数据 </button> </div> </template> <script src="/lib/vue/vue.js"></script> <script> var com3 = { template: "#com3", data() { return { title: "", msg: "", gTitle:‘‘, }; }, mounted() { this.gTitle = this.$attrs[‘g-title‘]//也可以不用定义新的属性，直接写$attrs[‘g-title‘] console.log(‘孙组件‘,this.$attrs,this.$listeners); }, methods: { setPtitle(){ //这里的方法名大小写要注意一下，就是坑在这里，他一直给了黄色的提示但是我忽略了，后来打印输出了console.log，发现方法名是小写的,所以写成小写的方法名就OK了，网上很多这地方的方法名都和组件绑定那边写的大小写一致，按照那个运行怕是一万年也都是失败。。 this.$emit(‘settitle‘,‘收到，好好学习，天天向上‘); } }, }; var com2 = { template: "#com2", inheritAttrs:false,//这里如果写true或者是不写这句话，你可以很明显的看到你绑定的时候自定义的值（在网站查看DOM的时候会看到这个自定义属性和实际的值，不想让人看到的话写一下是OK的） props:{ //这里是需要注意一下的，如果祖组件传递的属性在这里被声明了，那孙组件就获取不到了，因为被这里截断了，，感兴趣的可以解除这里的注释看看输出 // gMsg:{ // type:String // }, // gTitle:{ // type:String // } }, data() { return {}; }, mounted() { console.log(‘父组件‘,this.$attrs) }, components: { com3 } }; var com1 = { template: "#com1", data() { return { title: "你有新的消息", msg: "改变自己，认知世界", curTitle:‘‘ }; }, components: { com2 }, methods: { setTitle(msg) { this.curTitle=msg; } } }; new Vue({ el: "#app", components: { com1 } }); </script> </body> </html>
标签：传值 ring 网站 meta dom lib ons list pat
原文地址：https://www.cnblogs.com/llcdbk/p/12173515.html
