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的主要内容,如果未能解决你的问题,请参考以下文章

iframe跨域传值踩坑

Vue 踩坑日记二:View UI 组件添加单击事件不生效问题

Vue的踩坑集? —— 父组件传值给子组件,子组件改变值后再传回去

vue踩坑记:属性报undefined错误

Vue中的.sync不生效问题踩坑记录

基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记