1、组件间的传值
1.1 父组件向子组件传值
- 子组件自定义一个属性
- 父组件通过自定义属性绑定值
- 子组件调用自定义属性来拿到值
（1.1 完）
1.2 子组件向父组件传值
- 子组件自定义一个事件
- 父组件通过自定义事件绑定一个方法来接收值
（1.2 完）
1.3 兄弟组件间传值（或者夸组件传值）
- 新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）
- 组件1把值先传到bus
- 组件2从bus接收值
（1.3 完）
【完整代码】
parent.vue（父组件）
<template>
<div class="container">
<div class="header">
<h1>parent</h1>
<input v-model="toChildren" type="text"/>
<h1 class="getData">{{getChildren}}</h1>
</div>
<div class="main">
<div class="children1">
<!--父传子：通过自定义属性绑定向子组件传的值-->
<Children1 :getData="toChildren"></Children1>
</div>
<div class="children2">
<!--子传父：通过自定义事件绑定一个方法，用于接收子组件传的值-->
<Children2 @toParent="getChildrenData($event)"></Children2>
</div>
</div>
</div>
</template>
<script>
import Children1 from './children1'
import Children2 from './children2'
export default {
name: "parent",
components:{
Children1,
Children2
},
data(){
return {
toChildren:'',
getChildren:''
}
},
methods:{
getChildrenData(data){
this.getChildren = data;
}
}
}
</script>
<style scoped>
body{
background: #eee;
}
.container{
width: 100%;
}
.header{
width: 100%;
}
.main{
width: 985px;
margin: 50px auto;
}
.children1,.children2{
width: 40%;
height: 300px;
margin: 0 20px;
display: inline-block;
background: #909399;
color: #fff;
}
.getData{
color: darkred;
height: 50px;
}
</style>
children1.vue 子组件1
<template>
<div>
<h3>children1</h3>
<h1>{{getData}}</h1> <!--父组件传过来的值，在这展示-->
<input type="text" v-model="toBrother" >
<button @click="dataToBrother">toBrother</button>
</div>
</template>
<script>
import bus from '../eventBus/bus'
export default {
name: "children",
props:['getData'], //子组件自定义一个属性
data(){
return {
toBrother:''
}
},
methods:{
dataToBrother(){
bus.$emit('toBrother',this.toBrother)
}
}
}
</script>
<style scoped>
h1{
height: 50px;
color: darkred;
}
</style>
children2.vue 子组件2
<template>
<div>
<h3>children1</h3>
<h1>{{dataFromBrother}}</h1>
<input type="text" v-model="toParentData">
<button @click="dataToParent">toParent</button>
</div>
</template>
<script>
import bus from '../eventBus/bus'
export default {
name: "children2",
data(){
return {
toParentData:'',
dataFromBrother:''
}
},
created(){
bus.$on('toBrother',(data)=>{
this.dataFromBrother = data;
})
},
methods:{
dataToParent(){
this.$emit('toParent',this.toParentData)
}
}
}
</script>
<style scoped>
h1{
height: 50px;
color: darkred;
}
</style>
bus.js
import Vue from 'vue'
export default new Vue（完）
相关文章