vue.js - 两个vue组件中的data如何互相影响?

问题描述

问 题

第一个组件有1个v-if=xxx,data下写了xxx=false,我想在第二个组件中的按钮,点击后,第一个组件的xxx改成true,如何做呢

解决方案

最简单的，A组件里的v-if="xxx"不用data，改用props；B组件点击后，事件冒泡到其调用父组件那里，父组件再将变化传递以新的props形式传递给A组件。

如下例：

组件A

<template>
    <div v-if="xxx"></div>
<template>
<script>
    export default {
        props: {
            xxx: {
               type: Boolean,
               default: false
            }
        }
    };
</script>

组件B

<template>
    <button v-on:click="onClick"></div>
<template>
<script>
    export default {
        methods: {
            onClick: function(){
                this.$emit('xxxChanged', true);
            }
        }
    };
</script>

父组件

<template>
    <A :xxx="state"></A>
    <B v-on:xxxChanged="onChange"></B>
<template>
<script>
    export default {
        data: function(){
            return {
                state: false
            };
        },
        methods: {
            onChange: function(val){
                this.state = val;
            }
        }
    };
</script>

这篇关于vue.js - 两个vue组件中的data如何互相影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！