vue 平行组件传值

作者: ropon 分类: Vue 发布时间: 2019-01-05 15:11
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 平行组件传值</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script>
<script>
    let bus = new Vue();
    // Test ==> Test2传值 Test2要声明事件 $on("事件的名字", function(val) { })
    // Test要触发事件 $emit("Test2要声明事件名", 需要传值)
    // 前提这两个方法必须绑定到同一实例化对象上(bus)
    Vue.component("Test2", {
        data() {
            return {
                text: ""
            }
        },
        template: `
            <div class="test2">
                <h2>{{ text }}</h2>
            </div>`,
        methods: {

        },
        created() {
            //箭头函数中this指的谁调用此函数父级对象
            //es6 function函数,谁调用this就指向谁
            bus.$on("testData", (val) => {
                this.text = val;
            });
        }
    });

    Vue.component("Test", {
        data() {
            return {
                msg: "我是子组件的数据"
            }
        },
        template: `
            <div class="test">
                <button @click="clickHandler">传递</button>
            </div>`,
        methods: {
            clickHandler() {
                // console.log(this.msg);
                bus.$emit("testData", this.msg);
            }
        }
    });
    let vHeader = {
        data() {
            return {

            }
        },
        template: `
            <div class="header">
                <Test></Test>
                <Test2></Test2>
            </div>`
    };

    let App = {
        data() {
            return {

            }
        },
        template: `
            <div class="app">
                <vHeader></vHeader>
            </div>`,
        components: {
            vHeader
        }
    };

    new Vue({
        el: "#app",
        data() {
            return {

            }
        },
        components: {
            App
        }
    });

</script>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!