vue父子孙组件相互传递信息

最新推荐文章于 2022-04-11 16:36:39 发布

随意呀

最新推荐文章于 2022-04-11 16:36:39 发布

阅读量327

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43479115/article/details/116885174

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父传子

1.使用方法是子组件使用props来接收

 props: {
    childrenValue: {
      type: String,
      default: "2",
    },
  },

子传父

1.子组件使用$emit来发送

this.$emit("childrenClick", val);

2.父组件在，在子组件上绑定，并处理

父组件绑定childrenClick
 <Children
        :childrenValue="fathervalue"
        :sunName='hello'
        @sunClick='sunClick'
        @childrenClick='childrenClick'
        ></Children>
父组件接收子组件的信息childrenClick
childrenClick(val) {
      this.fathervalue = val;
    },

父传孙

1.使用attrs传递

父组件绑定在子组件sunName
 <Children
        :childrenValue="fathervalue"
        :sunName='hello'
        @sunClick='sunClick'
        @childrenClick='childrenClick'
        ></Children>

子组件使用attrs绑定给孙组件
 <Sub :subValue="childrenValue1" v-bind="$attrs" v-on="$listeners"></Sub>
在孙组件中接收
 <span>父组件传递给孙组件的信息:{{ $attrs.sunName }}</span>

孙传父

1.孙组件中定义好事件

孙组件组sunClick
 <button @click="sunClick">孙点击</button>

子组件使用listeners绑定给父组件
 <Sub :subValue="childrenValue1" v-bind="$attrs" v-on="$listeners"></Sub>
父组件中接收sunClick
 <Children
        :childrenValue="fathervalue"
        :sunName='hello'
        @sunClick='sunClick'
        @childrenClick='childrenClick'
        ></Children>
父组件处理方法
sunClick(val) {
      this.sunName = `父组件爱${val}`;
    },