标签（空格分隔）： vue
父组件向子组件传递数据
- Vue中父组件向子组件传递数据用props
举个例子
父组件中：
<template>
<div>
<v-mainScene :show-main-scene="isShowMainScene"></v-mainScene>
<-- 这个地方注意showMainScene一定要用-将驼峰命名分开 -->
</div>
</template>
<script>
import mainScene from '../mainScene/mainScene.vue';
export default {
data() {
return {
isShowMainScene: '我来自父组件'
};
},
components: {
'v-mainScene': mainScene
},
};
</script>
子组件中：
<template>
<div>
{{myShowMainScene}}
<-- 这个地方就会打印传过来的‘我来自父组件’ -->
</div>
</template>
<script>
export default {
props: {
showMainScene: String
},
data() {
return {
myShowMainScene: this.showMainScene
};
}
};
</script>
注意：
- 父组件中标签中，驼峰命名法一定要用写成-分开的形式，不可直接写驼峰命名传值
- 子组件中，如果直接用props中showMainScene也可以渲染，但控制台会报错，这是vue2.0中修改的部分，禁止这么用，所以应该在data中命名一个数据接收这个数据
2.子组件向父组件传值
举个例子
父组件中：
<template>
<div>
<v-mainScene
:show-main-scene="isShowMainScene"
@on-show-main-scene="onShowMainScene"
></v-mainScene>
<-- 这个地方注意showMainScene一定要用-将驼峰命名分开 -->
</div>
</template>
<script>
import mainScene from '../mainScene/mainScene.vue';
export default {
data() {
return {
isShowMainScene: '我来自父组件'
};
},
methods: {
onShowMainScene(val) {
//此处的传进来的参数val实际上就是子组件传过来的值
this.isShowMainScene = val;
},
components: {
'v-mainScene': mainScene
},
};
</script>
子组件中：
<template>
<div>
<span>{{myShowMainScene}}</span>
<-- 这个地方就会打印传过来的‘我来自父组件’ -->
<div @click="changeData">点我改变</div>
</div>
</template>
<script>
export default {
props: {
showMainScene: String
},
//设置监听,传值关键的步骤
watch: {
showMainScene(val) {
//此处父组件继续传值给子组件，父组件可在methods中改变传来的值，子组件在这里接收
this.MyShowMainScene = val;
},
//下面即实现了子组件改变父组件值
myShowMainScene(val) {
this.$emit('on-show-main-scene', val);//此处实现了双向绑定，子组件可以改变父组件值
}
},
data() {
return {
myShowMainScene: this.showMainScene
};
},
methods: {
changeData() {
this.myShowMainScene = '我来自子组件'
}
}
};
</script>
总结：子组件向父组件传值步骤：
- 父组件标签中设置传的数据：
show-main-scene="isShowMainScene"
- 父组件标签中设置接收子组件传过来的监听
@on-show-main-scene="onShowMainScene"
- 父组件中在methods中接收组件传来的值，在onShowMainScene中设置
onShowMainScene(val) {
//此处的传进来的参数val实际上就是子组件传过来的值
this.isShowMainScene = val;
},
- 子组件中在props中接收父组件值props: {showMainScene: String}
props: {showMainScene: String}
- 子组件data中初始化一个数据接收子组件传来的值
myShowMainScene: this.showMainScene
- 子组件中设置监听
watch: {
showMainScene(val) {
//此处父组件继续传值给子组件，父组件可在methods中改变传来的值，子组件在这里接收
this.MyShowMainScene = val;
},
//下面即实现了子组件改变父组件值
myShowMainScene(val) {
this.$emit('on-show-main-scene', val);//此处实现了双向绑定，子组件可以改变父组件值
}
},
3.总结
vue是使用很广泛的一种mvvm框架，但数据传值问题困扰了很多人，希望此文对数据传值有疑惑的vue爱好者有所帮助。
