vue父子兄传值理解

男娘i 2022-11-20 12:56 27阅读 0赞

父传子

总结:引入、注册、调用、传值,子组件props接收

  1. 引入子组件

    import son from “./son.vue”;

  2. components中注册子组件

    components: {

    1. son,

    }

  3. 使用子组件并且将数据传递给子组件

  4. 子组件接收数据,接收方法2种

    props:[‘myname’]

    props: {

    1. myname: {
    2. type: String,
    3. required: true,
    4. },

    },

子传父

总结:子组件通过事件操作 使用$emit传递数据

  1. 子组件定义绑定按钮,绑定点击事件

  2. 子组件使用this.$emit(‘自定义事件类型’,需要传递的数据) 将数据传给父组件

    tellFather() {

    1. this.$emit("tellToFather", this.mygfName);
    2. },
  3. 父组件监听事件,接收数据
    注意:监听的方法必须和子组件的命名相同

兄弟传值

总结:兄弟之间无法直接传值,可以通事件总线方法传递 (以下方法就是事件总线)

  1. 需将所有兄弟组件嵌套入父组件处,操作走第一大步(引入,注册,调用)
  2. 创建公共vue实例,并引入(由于this指向问题,需要创建一个公共vue实例来实现事件发出的监听问题) 创建一个js文件放下面的代码 在两个子组件中都要引入这个文件 常规命名为:eventBus.js 引入的时候命名为bus,所以下面使用的是bus.$on

    import Vue from “vue”;

    1. export default new Vue();
  3. son组件创建按钮绑定点击事件,将数据传递出去

    methods: {

    1. tellBorder() {
    2. bus.$emit("tellToborder", this.mygfName);
    3. },

    },

  4. border组件中在mounted中进行监听事件(因为不知道事件什么时候触发,所以需要界面渲染就开始监听,使用bus.$on)

    mounted() {

    1. bus.$on("tellToborder", (data) => {
    2. this.sonGFname = data;
    3. });

    },

发表评论

表情:
评论列表 (有 0 条评论,27人围观)

还没有评论,来说两句吧...

相关阅读