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

猜你喜欢