VUE 组件之间传值(父传子，子传父，兄弟之间)

最新推荐文章于 2024-05-30 15:26:53 发布

codesWang

最新推荐文章于 2024-05-30 15:26:53 发布

阅读量599

点赞数

分类专栏： VUE学习文章标签： vue

本文链接：https://blog.csdn.net/qazzwx/article/details/106074437

版权

VUE学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

接着上篇文章组件定义和基本使用，这边文章我们来看看组件之间的传值方式

上篇文章地址:https://blog.csdn.net/qazzwx/article/details/106068864

一、父传子

使用 props

<body>
    <div id="app">
        <my-button :muisc-name='name'></my-button>
        <my-button :muisc-name='naem1'></my-button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.component('my-button', {
            props:['muiscName'],
            template: `<div>
                <button @click="alertProcess()">自定义按钮</button> 
                <p>{{ muiscName }}</p>
                </div>`,
            data() {
                return {
                    message: 'hello world'
                }
            },
            methods: {
                alertProcess: function (event) {
                    alert('我是自定义全局组件呀')
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    name:'沉默是金',
                    naem1:'倩女幽魂'
                }
            }
        })
    </script>
</body>

运行效果如下图：

二、子传父（$emit 方式调用父组件上面的方法，是arguments 可以接收子组件传过来的多个参数）

<body>
    <div id="app">
        <my-button :muisc-name="name" @child-event="parentEvent"></my-button>
        <my-button :muisc-name="naem1"></my-button>
        <input type="text" v-model="childValue">
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.component('my-button', {
            props: ['muiscName'],
            template: `<div>
                <button @click="alertProcess()">自定义按钮</button> 
                <p>{{ muiscName }}</p>
                </div>`,
            data() {
                return {
                    message: 'hello world'
                }
            },
            methods: {
                alertProcess: function (event) {
                    this.$emit('child-event', '123456', '896')
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    name: '沉默是金',
                    naem1: '倩女幽魂',
                    childValue: '',
                }
            },
            methods: {
                parentEvent: function (data) {
                    //单个参数
                    console.log(data)
                    //多参数
                    let value = { ...arguments }
                    this.childValue= value[0] + value[1];
                }
            }
        })
    </script>
</body>

运行结果如下图

三、兄弟之间（相当于发布订阅的模式）

<body>
    <div id="app">
        <my-button button-text="改变第二个控件的值"></my-button>
        <my-button-two button-text="改变第一个控件的值"></my-button-two>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue();
        Vue.component('my-button', {
            props: ['buttonText'],
            template: `<div>
                <button @click="alertProcess()">{{ buttonText }}</button> 
                <p>{{ message }}</p>
                </div>`,
            data() {
                return {
                    message: 'hello world'
                }
            },
            mounted() {
                vm.$on('child-event2', (data) => {
                    this.message = data;
                })
            },
            methods: {
                alertProcess: function (event) {
                    vm.$emit('child-event', '改变下第二个值')
                },

            }
        })
        Vue.component('my-button-two', {
            props: ['buttonText'],
            template: `<div>
                <button @click="alertProcess()">{{ buttonText }}</button> 
                <p>{{ message }}</p>
                </div>`,
            data() {
                return {
                    message: 'hello world'
                }
            },
            mounted() {
                vm.$on('child-event', (data) => {
                    this.message = data;
                })
            },
            methods: {
                alertProcess: function (event) {
                    vm.$emit('child-event2', '改变下第一个值')
                }
            }
        })
        new Vue({
            el: '#app',
            data() {
                return {
                }
            },
            methods: {
            }
        })
    </script>
</body>

运行结果如下图：

codesWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE 组件之间传值(父传子，子传父，兄弟之间)

接着上篇文章组件定义和基本使用，这边文章我们来看看组件之间的传值方式上篇文章地址:https://blog.csdn.net/qazzwx/article/details/106068864一、父传子使用 props<body> <div id="app"> <my-button :muisc-name='name'></my-button> <my-button :muisc-nam...
复制链接

扫一扫