vue如何实现兄弟组件间值传递
vuex是状态管理仓库,可实现组件间数据共享,但vuex适合大型项目应用,用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢?可借助父子组件间值传递方法,实现原理是:子传父,父传子。这里我们用例子来简单介绍下:子组件传值给父组件:子组件通过触发父组件事件传值给父组件,子组件child1.vue代码:<template><div>...
·
vuex是状态管理仓库,可实现组件间数据共享,但vuex适合大型项目应用,用于小项目过于繁琐。那么vue如何实现兄弟组件数据共享呢?
可借助父子组件间值传递方法,实现原理是:子传父,父传子。
这里我们用例子来简单介绍下:
子组件传值给父组件:
子组件通过触发父组件事件传值给父组件,子组件child1.vue代码:
<template>
<div>
<h3>子组件child1,把值传递给父组件</h3>
<p><button @click="postData">点击传值给父元素</button></p>
</div>
</template>
<script>
export default{
data(){
return {
message : '子组件1的data'
}
},
methods:{
postData: function(){
this.$emit("parentEvent",this.message)
}
}
}
</script>
父组件传值给子组件:
父组件通过props传值给子组件,子组件child2.vue代码:
<template>
<div>
<h3>子组件child2,通过父组件获取子组件child1的值</h3>
<p>{{message}}</p>
</div>
</template>
<script>
export default{
props: ['message'],
data(){
return{}
},
methods:{
}
}
</script>
父组件代码:
<template>
<div id="app">
<h1>{{ msg }}</h1>
<h1>父页面</h1>
<child1 @parentEvent="getData"></child1>
<child2 :message="msg"></child2>
</div>
</template>
<script>
import child1 from './child1'
import child2 from './child2'
export default {
name: 'app',
components: {
child1,
child2
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
getData:function(data){
this.msg = data;
}
}
}
</script>
更多推荐
已为社区贡献11条内容
所有评论(0)