VUE平行组件之间的传值--$emit和$on的使用

最新推荐文章于 2024-02-18 15:37:12 发布

失眠的牛奶杯

最新推荐文章于 2024-02-18 15:37:12 发布

阅读量529

点赞数

分类专栏： vue 文章标签：组件传值

本文链接：https://blog.csdn.net/qq_23586923/article/details/103989883

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：有三个组件A，B，C，需要把组件A和组件B中的数据传到C，并且组件ABC是平行关系。

实现的思路是：创建一个空的vue实例，把A和B的数据通过$emit获取，然后C组件通过$on接收。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div id="app">
    <dom-a></dom-a>
    <dom-b></dom-b>
    <dom-c></dom-c>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

    var Event = new Vue();

    var A = {
        data() {
            return {
                a: '我是a组件中的数据'
            }
        },
        template: `
				<div>
					<span>A组件:{{a}}</span>
					<input type="button"  value = '把A数据传给C' @click = 'send'/>
				</div>
			`,
        methods: {
            send() {
                // $emit('事件名字',数据)
                console.log(this);
                Event.$emit('a-msg',this.a);

            }
        }
    };
    var B = {
        data() {
            return {
                b: '我是b组件中的数据'
            }
        },
        template: `
				<div>
					<span>B组件:{{b}}</span>
					<input type="button"  value = '把B数据传给C' @click = 'send'/>
				</div>
			`,
        methods: {
            send() {
                // $emit('事件名字',数据)
                console.log(this);
                Event.$emit('b-msg',this.b);
            }
        }
    };

    var C = {
        data(){
            return {
                a:'',
                b:''
            }
        },
        template:`

	<div>
		<h3>C组件:</h3>
		<span>接收A组件的数据为：{{a}}</span>
		<br />
		<span>接收B组件的数据为：{{b}}</span>
	</div>
    	`,
        mounted(){
            // 接收A中的数据

            // $on('事件名',fn(a))
            Event.$on('a-msg',(a)=>{
                this.a = a;
            });
            // 接收A中的数据
            Event.$on('b-msg',(b)=>{
                this.b = b;
            });
        },
    }
    new Vue({
        el: '#app',
        components: {
            'dom-a': A,
            'dom-b': B,
            'dom-c': C
        }
    })
</script>
</body>

</html>