VEU中的组件之间的数据传递

最新推荐文章于 2024-02-26 16:12:46 发布

Cool_so_cool

最新推荐文章于 2024-02-26 16:12:46 发布

阅读量343

点赞数

分类专栏： VUE.JS 文章标签： vue

本文链接：https://blog.csdn.net/Cool_so_cool/article/details/105974308

版权

VUE.JS 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

组价三部曲

创建组件。
注册组件。
使用组件。

组件之间的数据传递的方式
1. 父传子：通过props属性传递
2. 子传父通过$emit属性，用来发布自定义事件
3. 兄弟组件之间的传递

1.父传子

把父组件的数据以动态属性的方式放在当前子组件的行间属性上
在子组件中用props接收到这个属性（数组、对象）
在子组件取值使用动态的属性名取值

<body>
    <div id="app">
       <child :c="msg"></child>
       <child :c="num" :b="obj"></child>
       <child :b="obj"></child>
    </div>
    <script src="vue.js"></script>
    <script>
       let child={
            data(){
                return {
                    //msg:"苏大强" :如果自己身上也有msg这个属性，会去取父组件上的msg
                }
            },
            props:["c","b"],
            template:"<div>{{c}}{{b}}</div>"
        }
        let vm=new Vue({
            el:"#app",
            data:{
               msg:"春光郑好",
               num:"豫战豫勇",
               obj:"中国加油"
            },
            components:{
                child
            }
        })
    </script>
</body>

2.子传父

在VUE中子组件不能直接修改父组件的数据，想更改数据需要通过$emit属性，用来发布自定义事件，进行修改。
自定义的名称必须小写，@changemoney=

<body>
    <div id="app">
      父亲： {{money}}
      <!-- // 自定义事件 -->
       <son :m="money" @changemoney="fn" :b="fn"></son>
    </div>
    <script src="vue.js"></script>
    <script>
      let son = {
            data(){
                return {}
            },
            props:["m","b"],// props接收到的属性也会放在组件实例上一份 
            methods:{
                add(){
                    // this==> 组件的实例  
                    this.$emit("changemoney",1080);//这里面的1080传给fn中的val
                    // this.b();
                }
            },
            template:"<div>儿子：{{m}}<button @click='add'>点一下</button></div>"
        }
        let vm = new Vue({
            el:"#app",
            data:{
                money:888
            },
            methods:{
                fn(val){
                    this.money=val;
                }
            },
            components:{
                son
            }
        });
    </script>
</body>

子传父中的sync修饰符
代码中的两个方法是上面子传父的语法糖，也就是简写。写了这两个后父组件的methods中的方法就可以不写了。

<body>
    <div id="app">
      父亲： {{money}}
      <!-- $event接收的是$emit的第二个参数 -->
       <!-- <son :m="money" @update:m="money=$event"></son> -->
       <son :m.sync="money" :v.sync="val"></son>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        // 语法糖
        let son = {
            data(){
                return {}
            },
            props:["m","v"],
            methods:{
                add(){
                    this.$emit("update:m",2000);
                    this.$emit("update:v",8899);
                }
            },
            template:"<div>儿子：{{m}}<button @click='add'>多要点</button>{{v}}</div>"
        }
        new Vue({
            el:"#app",
            data:{
                money:888,
                val:1000
            },
            methods:{
            },
            components:{
                son
            }
        });
      
    </script>
</body>

3.兄弟之间的数据传递（eventBus）

兄弟之间的组件数据传递：eventBus;
$on : 订阅
$emit : 发布；轮询对应的事件池，让其中的方法执行
let eventBus = new Vue;// 这就是一个容器;联系了兄弟之间的纽带
下面写一个简单的案例，点弟弟组件让哥哥组件变绿，点弟弟让哥哥变红

<body>
    <div id="app">
        <bro1></bro1>
        <bro2></bro2>
    </div>
    <script src="../VUE上课/vue.js"></script>
    <script>
        // 兄弟之间的组件数据传递：eventBus;
        // $on : 订阅
        // $emit : 发布；轮询对应的事件池，让其中的方法执行
        let eventBus = new Vue;// 这就是一个容器;联系了兄弟之间的纽带
        let bro1 = {
            data(){
                return {
                    color:"红色"
                }
            },
            created(){//这里面可以那倒methods中的方法，但是不能拿到真实的DOM
                eventBus.$on("changeGreen",this.changeGreen)
            },
            methods:{
                fn1(){
                    eventBus.$emit('changeRed');
                },
                changeGreen(){
                    this.color="绿色"
                }
            },
            template:"<div>{{color}}<button @click='fn1'>变红</button></div>"
        };
        let bro2 = {
            data(){
                return {
                    color:"绿色"
                }
            },
            created(){
                eventBus.$on("changeRed",this.changeRed)
            },
            methods:{
                changeRed(){
                    this.color="红色";
                },
               fn2(){
                 eventBus.$emit('changeGreen');
               }
            },
            template:"<div>{{color}}<button @click='fn2'>变绿</button></div>"
        };

        let vm = new Vue({
            el:"#app",
            data:{
            },
            components:{
                bro1,
                bro2
            }
        })
    </script>
</body>

4. Vuex 适用于父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
这里面详细解释了一下什么是VUEX可以参考一下
https://blog.csdn.net/Cool_so_cool/article/details/105467214

Cool_so_cool

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VEU中的组件之间的数据传递

组价三部曲创建组件。注册组件。使用组件。组件之间的数据传递的方式1. 父传子：通过props属性传递2. 子传父通过$emit属性，用来发布自定义事件3. 兄弟组件之间的传递1.父传子把父组件的数据以动态属性的方式放在当前子组件的行间属性上在子组件中用props接收到这个属性（数组、对象）在子组件取值使用动态的属性名取值<body> ...
复制链接

扫一扫