vue 组件传值踩坑日记 1
Posted llcdbk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 组件传值踩坑日记 1相关的知识,希望对你有一定的参考价值。
今天在用平时很少用到的传值方式,是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>
以上是关于vue 组件传值踩坑日记 1的主要内容,如果未能解决你的问题,请参考以下文章
Vue 踩坑日记二:View UI 组件添加单击事件不生效问题