vue组件传值（父子组件传值与EventBus中间实例实现任意组件传值）

最新推荐文章于 2023-02-02 10:08:49 发布

celerstar.com

最新推荐文章于 2023-02-02 10:08:49 发布

阅读量532

点赞数

分类专栏：笔记文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_35999569/article/details/109745818

版权

笔记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

vue组件传值

父组件定义属性，子组件通过props接收属性值
子组件$emit一个方法，父组件通过v-on接收这个方法与参数值
定义一个新实例EventBus，将emit与on定义在不同组件，实现任意组件传值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件传值</title>
    <style>
        #app>div {
            padding: 20px;
            border: 1px solid #ccc;
            margin: 20px;
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        .bold {
            font-weight: bold;
            text-indent: 2em;
            display: inline-block;
        }
    </style>
</head>

<body>

    <div id="app">
        <div>
            <h3>父组件</h3>
            <p>parentData1:<input v-model="parentData1" /></p>
            <p>parentData2:<input v-model="parentData2" /></p>
            父组件接收子组件值:<span class="red">{{childData}}</span>
        </div>
        <div>
            <h3>组件a</h3>
            <testa :parentdata="parentData1"></testa>
        </div>
        <div>
            <h3>组件b</h3>
            <testb :parentdata="parentData2" v-on:childsubmit="childsubmit"></testb>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>

        $EventBus = new Vue()

        Vue.component('testa', {
            template: `
                <div>
                    <p>子组件通过prop接收父组件属性值：<span class="green">{{self_parentdata}}</span><i class="bold">(通过重新赋值给子组件data实现父组件修改数据时，子组件不修改)</i></p> 
                    <input v-model="inputValue" />
                    <button @click="sendMsg()">定义相同方法向任意组件传值</button>              
                </div>
            `,
            data: function () {
                return {
                    inputValue: '',
                    self_parentdata: ''
                }
            },
            props: ["parentdata"],
            mounted() {
                this.self_parentdata = this.parentdata
            },
            methods: {
                sendMsg() {
                    $EventBus.$emit("aMsg", this.inputValue);
                }
            },
        })

        Vue.component('testb', {
            template: `
                <div>
                    <p>子组件通过prop接收父组件属性值：<span class="green">{{parentdata}}</span><i class="bold">(不重新赋值时子组件data随父组件修改而修改)</i></p>  
                    <p>通过相同方法接收任意组件传递的值：<span class="red">{{amsg}}</span></p> 
                    <input v-model="inputValue" />
                    <button @click="sentToParent">子组件向父组件传值</button>
                </div>
            `,
            props: ["parentdata"],
            data() {
                return {
                    amsg: '',
                    inputValue: ''
                }
            },
            mounted() {
                $EventBus.$on("aMsg", (msg) => {
                    // A发送来的消息
                    this.amsg = msg;
                });
            },
            methods: {
                sentToParent() {
                    this.$emit("childsubmit", this.inputValue);
                }
            }
        })
        
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    childData: '',
                    parentData1: '默认父组件数据1',
                    parentData2: '默认父组件数据2'
                }
            },
            computed: {

            },
            watch: {

            },
            methods: {
                childsubmit(data) {
                    this.childData = data
                }
            },
            component: {
                'testa': 'testa',
                'testb': 'testb'
            }
        })

    </script>
</body>

</html>