vue面试之（父传子、子传父、兄弟之间以及vuex）

最新推荐文章于 2022-10-15 01:57:15 发布

~简简单单

最新推荐文章于 2022-10-15 01:57:15 发布

阅读量674

点赞数 2

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44076384/article/details/106194629

版权

说说vue中数据传递那些事（父传子、子传父、兄弟之间以及vuex）
VUE中的数据传递是单向的；

(1). 父传子
(2). 子传父
(3). 兄弟之间传递
复制代码
1.父传子（props）
如何让子组件获取到父组件中的数据？

(1). 把父组件的数据以动态属性的方式放在子组件的行间属性上；

(2). 在子组件中用props这个属性接收，（对象、数组）

(3). 在子组件中使用动态的属性名保持一致；

<body>
<div id="app">
    <!--普通的行间属性的属性值就是一个字符串-->
    <!--动态属性取父组件中的数据-->
    <child :m="msg" :t="hh"></child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let child = {
        data(){
            return {
                num:100,
            }
        },
        props:["m","t"],// props中放的是动态属性的属性名
        template:"<div>{{m}}{{t}}</div>"// 和props对应；
    }
    let vm = new Vue({
        el:"#app",
        data:{
            msg:"好好学习",
            hh:"天天向上"
        },
        components:{
            child
        }
    });
</script>
</body>

复制代码
2.子传父（发布订阅）
(1).在vue的实例methods中写方法

(2).在子组件标签的行间属性中订阅自定义方法@自定义事件=“方法名”

(3).在子组件的方法中通过$emit来发布自定义事件

(4).在子组件的template中绑定事件(比如click)


```javascript
<body>
<div id="app">
    {{money}}
    <!--订阅自定义事件的方法-->
    <son :m="money"  @changemoney="change"></son>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 在vue中，不能直接修改父组件中的数据；
    let son ={
        data(){
            return {}
        },
        props:["m"],// props接收的数据会放到当前的组件实例上；
        methods:{
            f(){
                // $emit : 发布自定义事件
                this.$emit("changemoney",3000);
            }
        },
        template:"<div>{{m}}<button @click='f'>多要点压岁钱</button></div>"
    };
    let vm = new Vue({
        el:"#app",
        data:{
            money:200
        },
        methods:{
           change(val){// 可以接收参数，$emit的第二个参数会传给change的第一个参数；
               this.money=val;
           }
        },
        components:{
            son
        }
    })
</script>
</body>


复制代码
**3.兄弟之间传递(eventBus)**
(1)、引入第三方new vue定义为eventBus

(2)、在组件中created中订阅方法eventBus.$on("自定义事件名",methods中的方法名)

(3)、在另一个兄弟组件中的methods中写函数，在函数中发布eventBus订阅的方法eventBus.$emit("自定义事件名")

(4)、在组件的template中绑定事件(比如click)

```javascript

```javascript
<body>
<div id="app">
    <bro1></bro1>
    <bro2></bro2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    **// 兄弟之间组件数据传递**
    let eventBus = new Vue;// 相当于第三方；
    let  bro1 = {
        data(){
            return {
                color:"红色"
            }
        },
        created(){
            // 把自己实例上的方法订阅了eventBus这个实例的changeGreen这个自定义的事件上
            eventBus.$on("changeGreen",this.changeGreen)
        },
        methods:{
            changeGreen(){
                this.color="绿色"
            },
            fn2(){
                eventBus.$emit("changeRed")
            }
        },
        template:"<div>{{color}}<button @click='fn2'>变红</button></div>"
    };
    let  bro2 = {
        data(){
            return {
                color:"绿色"
            }
        },
        created(){
            eventBus.$on("changeRed",this.changeRed)
        },
        methods:{
            changeRed(){
                this.color="红色"
            },
            fn1(){
                // 点击button时，触发eventBus的changeGreen 这个订阅的事件；那么就会执行哥哥组件的changeGreen 方法；
                eventBus.$emit("changeGreen")
            }
        },
        template:"<div>{{color}}<button @click='fn1'>变绿</button></div>"
    };
    let vm = new Vue({
        el:"#app",
        data:{
        },
        components:{
            bro1,
            bro2
        }
    })
</script>
</body>


复制代码
**vuex**
如果项目组件比较少，不需要使用vuex;如果项目数据复杂，组件比较多，建议使用vuex;

vuex :是一个专门为vue.js设计的状态管理模式，采用了集中存储和管理所有的组件的状态；把所有组件共享的数据抽离成一个store；方便更改或管理；

vuex数据是响应式的；当store中的数据发生改变，所有的依赖的组件都会得到高效的更新；
不能直接修改store中的状态，改变store中的数据唯一的办法是commit对应的mutation；

```javascript
<body>
<div id="app">
    <first></first>
    <second></second>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vuex/dist/vuex.js"></script>
<script>
    let state = {
        count:0,
        shop:[{name:"奔驰"},{name:"法拉利"}]
    }
    // 创建store
    let store = new Vuex.Store({
        state,
        mutations:{
            // 提交的动作；一般用于修改store中的数据；
            // 需要通过commit进行提交
            // mutation 这个函数默认的第一个参数就是当前store的状态；
            add_count(state){// state 代表的是vueX中的state;
                state.count++;
            }
        }
    });
    let first = {
        data(){
            return {}
        },
        methods:{
            add(){
                //commit执行传一个字符串，字符串是mutation的方法名
                this.$store.commit("add_count");
            }
        },
        // VueX.mapState:将vuex中的state的数据，映射到当前实例的计算属性上；
        computed:Vuex.mapState(["shop"]),
        // 通过$store进行取值；
        template:"<div >{{this.$store.state.count}}<button @click='add'>添加</button><li v-for='a in this.shop'>{{a.name}}</li></div>"
    }
    let second = {
        data(){
            return {}
        },
        template:"<div>{{this.$store.state.count}}</div>"
    }
    let vm = new Vue({
        el:"#app",
        data:{
        },
        components:{
            first,
            second
        },
        store// 当前vue实例就会新增一个$store属性，属性值是一个对象；同时也会给当前的组件新增$store属性
    });
</script>
</body>

~简简单单

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue面试之（父传子、子传父、兄弟之间以及vuex）

说说vue中数据传递那些事（父传子、子传父、兄弟之间以及vuex）VUE中的数据传递是单向的；(1). 父传子(2). 子传父(3). 兄弟之间传递复制代码1.父传子（props）如何让子组件获取到父组件中的数据？(1). 把父组件的数据以动态属性的方式当在子组件的行间属性上；(2). 在子组件中用props这个属性接收，（对象、数组）(3). 在子组件中使用动态的属性名保持一致；复制代码**2.子传父（发布订阅）**(1).在vue的实例m
复制链接

扫一扫