vue2.0组件之间的传值

“down”—>指的是下的意思,即父组件向子组件传值,用props;“up”—>指的是上的意思,即子组件想父组件传值,用emit。

1.子组件向父组件的传值:

Child.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div class="child">
<h1>子组件</h1>
<button v-on:click="childToParent">想父组件传值</button>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return {}
},
methods: {
childToParent(){
this.$emit("childToParentMsg", "子组件向父组件传值");
}
}
}
</script>

parent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div class="parent">
<h1>父组件</h1>
<Child v-on:childToParentMsg="showChildToParentMsg" ></Child>
</div>
</template>
<script>
import Child from './child/Child.vue'
export default{
name:"parent",
data(){
return {
}
},
methods: {
showChildToParentMsg:function(data){
alert("父组件显示信息:"+data)
}
},
components: {Child}
}
</script>

2.父组件向子组件传值

parent.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<div class="parent">
<h1>父组件</h1>
<Child v-bind:parentToChild="parentMsg"></Child>
</div>
</template>
<script>
import Child from './child/Child.vue'
export default{
name:"parent",
data(){
return {
parentMsg:'父组件向子组件传值'
}
},
components: {Child}
}
</script>

child.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div class="child">
<h1>子组件</h1>
<span>子组件显示信息:{{parentToChild}}</span><br>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return {}
},
props:["parentToChild"]
}
</script>

3.采用eventBus.js传值—兄弟组件间的传值

eventBus.js

1
2
3
import Vue from 'Vue'

export default new Vue()

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div id="app">
<secondChild></secondChild>
<firstChild></firstChild>
</div>
</template>

<script>
import FirstChild from './components/FirstChild'
import SecondChild from './components/SecondChild'

export default {
name: 'app',
components: {
FirstChild,
SecondChild,
}
}
</script>

FirstChild.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
<div class="firstChild">
<input type="text" placeholder="请输入文字" v-model="message">
<button @click="showMessage">向组件传值</button>
<br>
<span>{{message}}</span>
</div>
</template>
<script>
import bus from '../assets/eventBus';
export default{
name: 'firstChild',
data () {
return {
message: '你好'
}
},
methods: {
showMessage () {
alert(this.message)
bus.$emit('userDefinedEvent', this.message);//传值
}
}
}
</script>

SecondChild.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div id="SecondChild">
<h1>{{message}}</h1>
</div>
</template>
<script>
import bus from '../assets/eventBus';
export default{
name:'SecondChild',
data(){
return {
message: ''
}
},
mounted(){
var self = this;
bus.$on('userDefinedEvent',function(message){
self.message = message;//接值
});
}
}
</script>

转载请保持原始链接

原始链接: https://ru23.com/note/8b0c3b50.html