1.Vue父子组件之间通信(数据传递)问题

最新推荐文章于 2023-03-10 15:20:11 发布

扛麻袋的少年

最新推荐文章于 2023-03-10 15:20:11 发布

阅读量2k

点赞数 6

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

本文链接：https://blog.csdn.net/lzb348110175/article/details/88880538

版权

Vue 专栏收录该内容

24 篇文章 15 订阅

订阅专栏

1、父组件传值给子组件------->子组件使用 props 属性接收

2、子组件传值给父组件-------->子组件通过$emit 传递（自定义事件传递），父组件通过@属性名称接收

3、父组件，子组件，兄弟组件相互传值------>需要 bus 中央总线，相当于一个中介

1、父组件传值给子组件------->使用props属性接收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        //1.此处通过v-bind(简写为冒号:)来绑定
        <my-component :message="message"></my-component><br>
    </div>
    <script src="vue.min.js"></script>
    <script>

        Vue.component('my-component',{
            //2.通过props接受父组件传给子组件的值
            props:['message'],
            template:'<span>|||我接收的值是|||：{{message}}</span>',
        })
        var app = new Vue({
            el:'#app',
            data:{
                message:'我是父组件要传给子组件的值'
            }
        })
    </script>
</body>
</html>

2、子组件传值给父组件-------->子组件通过$emit传递，父组件通过@属性名称接收

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        //2.父组件通过@来接受，然后通过getMsg方法来处理数据
        <my-component @message="getMsg"></my-component><br>
        <span>{{message}}</span>
    </div>
    <script src="vue.min.js"></script>
    <script>
        Vue.component('my-component',{
            template:'<button @click="sendData">向父组件传值</button>',
            methods:{
                sendData:function (e) {
                    //1.子组件通过this.$emit(key,value)传递值给父组件
                    this.$emit('message','我是子组件要传递给父组件的值');
                }
            }
        })
        var app = new Vue({
            el:'#app',
            data:{
                message:'1',
            },
            methods: {//4、此处必须是methods，不能是计算属性,mounted等
                //3.处理数据
                getMsg:function (msg) {
                    this.message = msg;
                }
            }
        })
    </script>
</body>
</html>

3、父组件，子组件，兄弟组件相互传值------>需要bus中央总线，相当于一个中介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{message}}
        <my-component></my-component>
        <my-component1></my-component1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        //定义中央总线bus
        var bus = new Vue();

        //组件1
        Vue.component('my-component',{
            template:'<button @click="btnClick">click</button>',
            methods:{
                btnClick:function () {
                    //通过bus中央总线传值,使用bus.$emit(key,value);
                    bus.$emit('data',111111)
                }
            }
        })
        //组件2
        Vue.component('my-component1',{
            data:function(){
                return {
                    msg:'第二个组件'
                }
            },
            template:'<span>{{msg}}</span>',

            //兄弟组件：通过bus中央总线接收值,使用bus.$on(key,function(){...});
            //此处需要使用钩子函数：mounted
            mounted:function () {
                var _this = this; //此处注意this指向
                bus.$on('data',function (msg1) {
                    alert(msg1)
                    _this.msg = msg1;
                })
            }
        })

        var app = new Vue({
            el: '#app',
            data:{
                message:'this is message'
            },
            //父组件：通过bus中央总线接收值,使用bus.$on(key,function(){...});
            //此处需要使用钩子函数：mounted
            mounted: function () {
                var _this = this;
                bus.$on('data',function (msg) {
                    _this.message = msg
                })

            }
        })
    </script>
</body>
</html>

附：Vue篇目录：

1.Vue组件之间传值问题 2.v-model 用在组件中

3.Vue.js 实战调查问卷WebApp项目 4.vue-cli + webpack搭建Vue开发环境

5. Vue简单问题汇总(持续更新...) 6.Vue组件之间数据通信之Bus总线

7.Vue-Router导航钩子(附Demo实例) 8.ES6箭头函数与普通函数的区别

9.Vuex的使用 10.Vuex组件中的mapState、mapGetters、mapMutations、mapActions等辅助函数

11.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题

12.Vuex命名空间namespaced 13.Vue axios的使用

---->如有疑问，请发表评论，或者联系博主：lzb348110175@163.com，欢迎哦^_^

扛麻袋的少年

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
1.Vue父子组件之间通信(数据传递)问题

1、父组件传值给子组件------->使用props属性接收2、子组件传值给父组件-------->子组件通过$emit传递，父组件通过@属性名称接收3、父组件，子组件，兄弟组件相互传值------>需要bus中央总线，相当于一个中介1、父组件传值给子组件------->使用props属性接收<!DOCTYPE html><h...
复制链接

扫一扫