第一个组件有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#父子组件通信