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

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>

实现效果:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值