H5W3
当前位置:H5W3 > 其他技术问题 > 正文

两个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>

回答:

向上派发$dispatch(),向下广播$broadcast()

http://cn.vuejs.org/guide/components.html#父子组件通信

本文地址:H5W3 » 两个vue组件中的data如何互相影响?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址