Ashun's 技術駅
xugaoyi
2022-02-14
目录

13组件之间传递数据

# 组件之间传递数据方式

[success] vue 的组件之间是如何传递数据

父传子：propos

子传父：$emit

非父子：eventBus、依赖注入、v-bind="$attrs"和v-on="$listeners"、vuex

# 父传子

<my-component1 :child-msg="fathermsg"></my-component1>

let myComponent1 = {
  props:["childMsg"],//接收器
  template:"<div>组件1{{childMsg}}</div>",
}

//根组件
new Vue({
  el: "#app",
  data:{
    fathermsg:"hello"
  },
  components:{
    myComponent1
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

%accordion% 参考...💢 %accordion%

<div id="app">
    <my-component1></my-component1>
</div>

<script>
    //局部组件（区域注册）👦子组件
    let myComponent1 = {
        template: "<div>我的组件{{msg}}</div>",
        data() {
            return {
                msg: "hello",
            }
        }
    }

    //👨父组件
    new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        components: {
            myComponent1,
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

%/accordion%

%accordion% 父传子 🚀 %accordion%

fathermsg是父组件的数据

childmsg 是子组件的接收器

<div id="app">
    <my-component1 :childmsg="fathermsg"></my-component1>
</div>

<script>
    //局部组件（区域注册）👦子组件
    let myComponent1 = {
        props: ["childmsg"], //接收器（跟data的数据用法一样）
        template: "<div>我的组件1{{childmsg}}</div>",
    }

    //👨父组件
    new Vue({
        el: "#app",
        data: {
            fathermsg: "父组件的数据"
        },
        components: {
            myComponent1,
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

%/accordion%

传多个数据

<my-component1 :child-msg="{fathermsg,fathermsg2}"></my-component1>

let myComponent1 = {
  props:["childMsg"],
  template:"<div>组件1{{childMsg.fathermsg}}{{childMsg.fathermsg2}}</div>",
}

//根组件
new Vue({
  el: "#app",
  data:{
    fathermsg:"hello",
    fathermsg2:"hi"
  },
  components:{
    myComponent1
  }
});
<my-component1 :child-msg="fathermsg" :child-msg2="fathermsg2"></my-component1>

let myComponent1 = {
  props:["childMsg","childMsg2"],
  template:"<div>组件1{{childMsg}}{{childMsg2}}</div>",
}

//根组件
new Vue({
  el: "#app",
  data:{
    fathermsg:"hello",
    fathermsg2:"hi"
  },
  components:{
    myComponent1
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 子传父

<my-component1 @childevent="fatherevent($event)"></my-component1>

let myComponent1 = {
  template:"<div>组件1<button @click='change'>按钮</button></div>",
  data(){
    return{
      childmsg:"hello"
    }
  },
  methods: {
    change(){
      this.$emit("childevent",this.childmsg)//提交一个自定义事件
    }
  },
}

//根组件
new Vue({
  el: "#app",
  components:{
    myComponent1
  },
  methods: {
    fatherevent(e){
      console.log(e)
    }
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

%accordion% 子传父 %accordion%

fathermsg 是父组件的数据

childmsg 是子组件的接收器

<div id="app">
    <my-component1 @childevent="fatherevent($event)"></my-component1>
</div>

<script>
    //局部组件（区域注册）👦子组件
    let myComponent1 = {
        template: "<div>我的组件1<button @click='handler'>按钮</button></div>",
        //给子组件添加数据
        data() {
            return {
                msg: "子组件的数据",
            };
        },
        //传事件
        methods: {
            handler() {
                this.$emit("childevent", this.msg); //触发一个自定义事件
            },
        },
    };

    //👨父组件
    new Vue({
        el: "#app",
        components: {
            myComponent1,
        },
        methods: {
            fatherevent(e) {
                console.log(e);
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

%/accordion%

子传多个数据给父

<my-component1 @childevent="parentsevent($event)"></my-component1>

let myComponent1 = {
  data(){
    return{
      value:"子组件的数据",
      value2:"子组件的数据2"
    }
  },
  template:"<div>组件1<button @click='change'>按钮</button>{{value}}</div>",
  methods: {
    change(){
      this.$emit("childevent",[this.value,this.value2])
    }
  },
}

//根组件
new Vue({
  el: "#app",
  components:{
    myComponent1
  },
  methods: {
    parentsevent(a){
      console.log(a)
    }
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

%accordion% 子传父-多线程 %accordion%

fathermsg 是父组件的数据

childmsg 是子组件的接收器

<div id="app">
    <my-component1 @childevent="fatherevent($event)"></my-component1>
</div>

<script>
    //局部组件（区域注册）👦子组件
    let myComponent1 = {
        template: "<div>我的组件1<button @click='handler'>按钮</button></div>",
        data() {
            return {
                msg1: "子组件的数据",
                msg2: "子组件的数据"
            }
        },
        methods: {
            handler() {
                this.$emit("childevent", { msg1: this.msg1, msg2: this.msg2 })//触发一个自定义事件
            }
        },
    }

    //👨父组件
    new Vue({
        el: "#app",
        components: {
            myComponent1,
        },
        methods: {
            fatherevent(e) {
                console.log(e);
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

%/accordion%

# 单向数据流

vue 规定数据的流向只能是单向的，并且不能直接修改 props 数据，必须把数据赋给 data 或者 computed

<my-component1 :msg="msg" @childevent="parentsevent($event)"></my-component1>

let myComponent1 = {
    props:["msg"],
    data(){
      return{
        value:this.msg//不能直接修改props，需要赋值给data或者computed
      }
    },
    template:"<div>组件1<button @click='change'>按钮</button>{{value}}</div>",
    methods: {
      change(){
        this.value = "子组件的数据"
        this.$emit("childevent",this.value)
      }
    },
  }

  //根组件
  new Vue({
    el: "#app",
    components:{
      myComponent1
    },
    data:{
      msg:"父组件的数据"
    },
    methods: {
      parentsevent(e){
        this.msg = e
      }
    },
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

%accordion% 单向数据流父替子 🚀 %accordion%

<div id="app">
    <my-component1 :msg="msg"></my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>👦我是子组件,{{childmsg}}</div>",
        props: ["msg"],

        //更改数据
        data() {
            return {
                childmsg: this.msg
            }
        },
        created() {
            this.childmsg = "我是替换的数据"
        },
    }
    //父组件
    new Vue({
        el: "#app",
        data: {
            msg: "👨父组件的数据"
        },
        components: {
            myComponent1,
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

%/accordion%

%accordion% 单向数据流的注意点 🚀 %accordion%

对象

<div id="app">
    {{obj}}
    <my-component1 :obj="obj"></my-component1>
</div>

<script>
    let myComponent1 = {
        template: "<div>我的组件1{{childobj}}</div>",
        props: ["obj"],
        data() {
            return {
                //: JSON.assign({},this.obj) //这里是浅克隆
                childobj: JSON.parse(JSON.stringify(this.obj)) ✨//这里是深克隆
            }
        },
        created() {
            this.childobj.name = "李四"
        },
    }
    new Vue({
        el: "#app",
        data: {
            obj: { name: "张三" }
        },
        components: {
            myComponent1,
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

数组

<div id="app">
    <my-component1 :obj="arr"></my-component1>
</div>

<script>
    let myComponent1 = {
        template: "<div>我的组件1{{childobj[0]}}</div>",
        props: ["obj"],
        data() {
            return {
                childobj: this.obj
            }
        },
        created() {
            this.childobj[0] = "李四"
            // console.log(this.childobj[0]);
        },
    }
    new Vue({
        el: "#app",
        data: {
            arr: ["张三", 'a']
        },
        components: {
            myComponent1,
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

%/accordion%

# v-model 的高级用法

<my-component v-model="bool"></my-component>;

let myComponent = {
  props: {
    bool: Boolean,
  },
  model: {
    //model属性是新增的属性，用于给非表单标签的自定义组件添加v-model功能
    prop: "bool", //指定props属性
    event: "change", //指定触发的事件
  },
  template: "<div v-if='bool'>弹窗<button @click='change'>确定</button></div>",
  methods: {
    change() {
      this.$emit("change", false); //触发的事件
    },
  },
};

//根组件
new Vue({
  el: "#app",
  components: {
    myComponent,
  },
  data: {
    bool: false,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

%accordion% v-model 的高级用法练习 🚀 %accordion%

<div id="app">
    <my-component1 v-model="num"></my-component1>
    {{num}}
</div>

<script>
    //局部组件（区域注册）👦子组件
    let myComponent1 = {
        template: "<div>我是子组件<button @click='change'>按钮</button></div>",
        props: ["num"],
        data() {
            return {
                childnum: this.num,
            };
        },
        model: {
            prop: "num",
            event: "childevent",
        },
        methods: {
            change() {
                this.childnum = 2;
                this.$emit("childevent", this.childnum);//子传父
            },
        },
    };

    //👨父组件
    new Vue({
        el: "#app",
        data: {
            num: 1,
        },
        components: {
            myComponent1,
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

%/accordion%

%accordion% 案例 🚀 %accordion%


<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid;
    }
</style>

<div id="app">
    <button @click="bool=true">开</button>
    <my-component1 v-model="bool"></my-component1>
</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div class='box' v-if='bool'><button @click='close'>关闭</button></div>",
        props: ["bool"],
        model: {
            prop: "bool",
            event: "childevent",
        },
        data() {
            return {
                mybool: this.bool,
            }
        },
        methods: {
            close() {
                this.mybool = false;
                this.$emit("childevent", this.mybool)
            }
        }
    };

    //父组件
    new Vue({
        el: "#app",
        data: {
            bool: false,
        },
        components: {
            myComponent1,
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

%/accordion%

# .sync 修饰符

与 v-model 效果一致，以前的写法，不推荐，推荐使用 v-model

<my-component :bool.sync="bool"></my-component>

let myComponent = {
  props: {
    bool:Boolean
  },
  template: "<div v-if='bool'>弹窗<button @click='change'>确定</button></div>",
  methods: {
    change(){
      this.$emit("update:bool",false)
    }
  },
};

//根组件
new Vue({
  el: "#app",
  components: {
    myComponent,
  },
  data: {
    bool: false,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 非父子组件传递数据

# 1、eventBus(订阅发布模式、总线模式)

<my-component1></my-component1>
<my-component2></my-component2>

Vue.prototype.$eventBus = new Vue()//实例化vue(总线)

//组件1
let myComponent1 = {
  template: "<div>组件1<button @click='send'>发送</button></div>",
  data(){
    return{
      msg:"组件1的数据"
    }
  },
  methods: {
    send(){
      this.$eventBus.$emit("myevent",this.msg)//发布器
    }
  },
};

//组件2
let myComponent2 = {
  template: "<div>组件2</div>",
  created() {
    this.$eventBus.$on("myevent",(e)=>{//订阅器
      console.log(e)
    })
    this.$eventBus.$off("myevent")//取消订阅
  },
};

//根组件
new Vue({
  el: "#app",
  components: {
    myComponent1,
    myComponent2
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

%accordion% 非父子传递方法 两子之间的传递数据 👦 %accordion%

<div id="app">
    <my-component1 @childeventa="fatherevent($event)"></my-component1>
    <my-component2 :childevent="fathermsg"></my-component2>

</div>

<script>
    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>👦我是子组件<button @click='handler'>按钮</button></div>",
        data() {
            return {
                msg: ",👦我是子组件1"
            }
        },
        methods: {
            handler() {
                this.$emit("childeventa", this.msg)
            }
        }
    };
    let myComponent2 = {
        template: "<div>🧑我是子组件2{{childevent}}</div>",
        props: ["childevent"]

    };

    //👨父组件
    new Vue({
        el: "#app",
        data: {
            fathermsg: "",
        },
        components: {
            myComponent1,
            myComponent2,
        },
        methods: {
            fatherevent(e) {
                this.fathermsg = e;
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

%/accordion%

%accordion% 非父子传递-订阅发布模式练习 🚀 %accordion%

<div id="app">
    <my-component1></my-component1>
    <my-component2></my-component2>
</div>

<script>
    Vue.prototype.$eventBus = new Vue();

    //局部组件（区域注册）子组件
    let myComponent1 = {
        template: "<div>👦我是子组件<button @click='handler'>按钮</button></div>",
        data() {
            return {
                msg: "；👧我是子组件派来的数据",
            };
        },
        methods: {
            handler() {
                this.$eventBus.$emit("aevent", this.msg);
            },
        },
    };

    //孙子组件
    let myComponent2 = {
        template: "<div>👶我是孙组件{{msg}}</div>",
        data() {
            return {
                msg: "",
            };
        },
        created() {
            this.$eventBus.$on("aevent", (res) => {
                this.msg = res;
            });
        },
    };

    //👨父组件
    new Vue({
        el: "#app",
        data: {
            fathermsg: "",
        },
        components: {
            myComponent1,
            myComponent2,
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

image-20220111125040509

%/accordion%

# 2、依赖注入

只要在父组件有数据，所有的直属后代都有数据。

<mycomponent2></mycomponent2>;

let mycomponent1 = {
  template: "<div>a组件{{msg}}</div>",
  inject: ["msg"],
};

let mycomponent2 = {
  template: "<div>b组件{{msg}}<mycomponent1></mycomponent1></div>",
  components: {
    mycomponent1,
  },
  inject: ["msg"],
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent2,
  },
  provide() {
    return {
      msg: "根组件数据",
    };
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

%accordion% 依赖注册练习 🚀 %accordion%

<div id="app">
    <my-component1></my-component1>
</div>

<script>
    //局部组件 （区域注册）孙组件
    let myComponent2 = {
        template: "<div>👶我是孙组件，{{msg}}</div>",
        inject: ["msg"],
    };

    //子组件
    let myComponent1 = {
        template: "<div>👦我是子组件，{{msg}}<my-component2></my-component2></div>",
        components: {
            myComponent2,
        },
        inject: ["msg"]
    };

    //父组件
    new Vue({
        el: "#app",
        data: {
            fathermsg: "👨我是父组件的数据。",
        },
        components: {
            myComponent1,
        },
        // 依赖注入
        provide() {
            return {
                msg: this.fathermsg
            };
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

image-20220111125654802

%/accordion%

# 3、v-bind='$attrs'、v-on='$listeners'

可用于写高级组件封装。

<mycomponent2 :msg="msg" @myevent="myevent($event)"></mycomponent2>

let mycomponent0 = {
  props: {
    msg: {
      type: String,
      required: true,
    },
  },
  template: "<div>z组件{{msg}}</div>",
  created() {
    this.$emit("myevent",123)
  },
};

let mycomponent1 = {
  template: "<div>a组件<mycomponent0 v-bind='$attrs' v-on='$listeners'></mycomponent0></div>",
  components:{
    mycomponent0
  }
};

let mycomponent2 = {
  template:
    "<div>b组件<mycomponent1 v-bind='$attrs' v-on='$listeners'></mycomponent1></div>",
  components: {
    mycomponent1,
  },
};

//根组件
new Vue({
  el: "#app",
  components: {
    mycomponent2,
  },
  data: {
    msg: "根组件的数据",
  },
  methods: {
    myevent(e) {
      console.log(e);
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

%accordion% 🔨 隔代遗传 爷爷传也孙子 %accordion%

<div id="app">
    <my-component1 :msg="111"></my-component1>
</div>

<script>
    //局部组件（区域注册）
    let myComponent3 = {
        template: "<div>👶我是子组件3{{msg}}</div>",
        props: ["msg"],
    };

    let myComponent2 = {
        template:
            "<div>👦我是子组件2<my-component3 v-bind='$attrs'></my-component3></div>",
        components: {
            myComponent3,
        },
    };

    let myComponent1 = {
        template:
            "<div>🧑我是子组件1<my-component2 v-bind='$attrs'></my-component2></div>",
        components: {
            myComponent2,
        },
    };

    //👨父组件
    new Vue({
        el: "#app",
        components: {
            myComponent1,
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

%/accordion%

%accordion% 🔨🔨 隔代遗传 爷爷传也孙子 %accordion%


<div id="app">
    <my-component1 :msg1="1" :msg2="2" :msg3="3"></my-component1>
</div>

<script>
    //局部组件（区域注册）
    let myComponent3 = {
        template: "<div>👶我是子组件3{{msg1}}{{msg2}}{{msg3}}</div>",
        props: ["msg1", "msg2", "msg3"],
    };

    let myComponent2 = {
        template:
            "<div>👦我是子组件2<my-component3 v-bind='$attrs'></my-component3></div>",
        components: {
            myComponent3,
        },
    };

    let myComponent1 = {
        template:
            "<div>🧑我是子组件1<my-component2 v-bind='$attrs'></my-component2></div>",
        components: {
            myComponent2,
        },
    };

    new Vue({
        el: "#app",
        components: {
            myComponent1,
        },
        data: {
            fathermsg: "👨我是父组件数据。",
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

%/accordion%

%accordion% 🔨🔨🔨 隔代遗传 爷爷传也孙子 %accordion%


<div id="app">
    <my-component1 :msg1="1" :msg2="2" :msg3="3" @event="fn($event)"></my-component1>
</div>

<script>
    //局部组件（区域注册）
    let myComponent3 = {
        template: "<div>👶我是子组件3{{msg1}}{{msg2}}{{msg3}}</div>",
        props: ["msg1", "msg2", "msg3"],
        created() {
            this.$emit("event", "这是组件3的数据"); //自定义数据
            // console.log(this.$attrs);
        },
    };

    let myComponent2 = {
        template:
            "<div>👦我是子组件2<my-component3 v-bind='$attrs' v-on='$listeners'></my-component3></div>",
        components: {
            myComponent3,
        },
    };

    let myComponent1 = {
        template:
            "<div>🧑我是子组件1<my-component2 v-bind='$attrs' @event='fn($event)' v-on='$listeners'></my-component2></div>",
        components: {
            myComponent2,
        },
        methods: {
            fn(e) {
                console.log(1, e); //1 "这是组件3的数据"
            },
        },
        // created() {
        //     console.log(this.$attrs);
        // }
    };

    //👨父组件
    new Vue({
        el: "#app",
        components: {
            myComponent1,
        },
        //获取数据
        methods: {
            fn(e) {
                console.log(e);//这是组件3的数据
                // console.log(this.$attrs);
            },
        },
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

%/accordion%

# 4、vuex

编辑 (opens new window)
上次更新: 2023/08/06, 00:38:41
12组件
14props验证

← 14props验证→

最近更新
01
课件-react路由-V6
01-22
02
课件-国际化
01-22
03
课件-redux-toolkit
01-22
更多文章>
Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License