vue中,父子组件,兄弟间传值
在vue中,经常会遇到组件间数据传递的问题,这里来了解下父子组件,及兄弟组件之间的数据传递父组件传值给子组件父组件通过v-bind:参数名=’数据变量’子组件通过props接收父组件通过v-bind:参数名=’数据变量’<template><div id="app">&
在vue中,经常会遇到组件间数据传递的问题,这里来了解下父子组件,及兄弟组件之间的数据传递
父组件传值给子组件
- 父组件通过v-bind:参数名=’数据变量’
- 子组件通过props接收
父组件通过v-bind:参数名=’数据变量’
<template>
<div id="app">
<!--静态头部-->
<v-header v-bind:seller='seller'></v-header>
<!--tab栏-->
<div class="tab">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<!--动态页面-->
<router-view :seller="seller" keep-alive class="view one"></router-view>
</div>
</template>
<script type="text/ecmascript-6">
import header from './components/header/header.vue'
const DATA_OK = true;
export default {
name: 'App',
data(){
return{
seller:{}
}
},
created(){
this.$http.get('/api/seller').then((response)=>{
if(response.ok == DATA_OK){
this.seller = response.body.data;
}
})
},
components:{
'v-header' : header
}
}
</script>
子组件通过props接收
export default {
props: {
seller:{
type: Object
}
}
}
/*还可以为props设置默认值,在没有传递过来的时候生效*/
props:{
food:{
type: Object,
default(){
return {
count:2
}
}
}
},
子组件传值给父组件
官网上有较详尽的介绍:http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1
1、子组件发射数据,父组件接收
子组件
this.$emit('cartadd', event.target);
父组件
在子组件这个标签中加这个方法
<v-cartcont @cartadd='_drop'></v-cartcont>
注意
在这里不能用this.
on,因为
o
n
,
因
为
emit和
on必须基于同一个vue实例,所以父组件作用域
o
n
必
须
基
于
同
一
个
v
u
e
实
例
,
所
以
父
组
件
作
用
域
on() 作用在子组件标签上用v-on 代替,还可以创建中央事件总线eventBus.js,(eventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。)
import Vue from vue
export default new Vue;
import bus from './eventBus.js'
//便可以使用
bus.$emit
bus.$on
2、子组件直接改变父组件数据
- vue2.0中,子组件中不能修改父组件的状态,否则在控制台中会报错。
- 比如,父组件传给子组件一个变量,子组件只能接收这个值,不能修改这个值,修改会报错。想要修改,只能赋值给另一个data中定义的变量
- 但是,这仅限于props为非数组及对象等引用类型数据,譬如字符串,数字等
如果props是对象的话,在子组件内修改props的话,父组件是不会报错的,父组件的值也会跟着改变
父组件传递给子组件一个对象,子组件将这个对象改了值,那么父组件中的值相应改变
- 为对象添加属性的时候,应该用这种方式增加,而不是直接点加,Vue.set(this.food,’count’,1)
组件传值给兄弟组件
其实是一个,子组件传值给父组件,父组件监听到数据再传递给另一个子组件的过程
例如:a组件发射一个isLogFn数据
<template>
<div class="adiv">
<p>a组件</p>
<button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('isLogFn','log')
}
}
}
</script>
父组件接收a,b子组件
<template>
<div id="app">
<aPage @isLogFn = "logfc"></aPage>
<bPage :isLog = "login"></bPage>
</div>
</template>
<script>
import aPage from './components/a.vue'
import bPage from './components/b.vue'
export default {
data () {
return {
login: 'false'
}
},
name: 'app',
components: {
aPage,
bPage
},
methods: {
logfc(data) {
if (data == 'log') {
this.login = 'true'
}
}
}
}
</script>
b组件最后接收数据,b组件中需要创建props,定义一个isLog 属性,这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据,最终供b组件使用。示例中,我们在v-show=”isLogin” 中用来控制弹窗是否打开。
b.vue
<template>
<div class="bdiv" v-show="isLogin">我是组件B弹窗</div>
</template>
<script>
export default {
props: ['isLog'],
data () {
return {
}
},
computed: {
isLogin () {
if(this.isLog == 'true'){
return true
} else {
return false
}
}
}
}
</script>
更多推荐
所有评论(0)