Vue组件间传值

父组件传值给子组件

只要将子组件注册到父组件里面，然后子组件接收一下父组件的方法就可以了

父组件

<template>
<div id="app">
<components-a
msgFromFather="I am a father"
></components-a>
</div>
</template>

<script>
import ComponentsA from './components/componentsA'
export default {
components: {ComponentsA},
data() {
return{
}
},
methods: {
}
}
</script>
<style>
</style>

子组件

<template>
<div class="hello">
<h1>{{msg}}</h1>
<button v-on:click="onClickMe">Click!</button>
</div>
</template>
<script>
export default {
props:['msgFromFather'],
data() {
return {
msg:'hello from component A'
}
},
methods: {
onClickMe() {
console.log(this.msgFromFather);
}
}
}
</script>
<style scoped>
</style>

子组件传值给父组件

子组件使用this.$emit发送给父组件，父组件绑定的方法跟子组件发送过来的方法一致即可

父组件

<template>
<div id="app">
<components-a
msgFromFather="I am a father"
v-on:child-tell-me-something="lisenToMyBoy"
></components-a>

<p>child tell me {{childWords}}</p>
</div>
</template>

<script>
import ComponentsA from './components/componentsA'

export default {
components: {ComponentsA},
data() {
return{
childWords:''
}
},
methods: {
//2.绑定子组件事件 子-父
lisenToMyBoy(msg){
// console.log(msg);
this.childWords=msg
}
}
}
</script>

<style>
</style>

注释：

如果子组件传的是一个固定的值，父组件直接写方法就行：child-tell-me-something=”lisenToMyBoy”； 如果子组件传的是一个变量，父组件就要绑定：v-on:child-tell-me-something=”lisenToMyBoy”

子组件

<template>
<div class="hello">
<h1>{{msg}}</h1>
<button v-on:click="onClickMe">Click!</button>
</div>
</template>

<script>
export default {
props:['msgFromFather'],
data() {
return {
msg:'hello from component A'
}
},
methods: {
onClickMe() {
//2.发送给父级
this.$emit('child-tell-me-something',this.msg);
}
}

}
</script>
<style scoped>
</style>

脚注

Vue2.0后 $$dispatch()，$broadcast()被弃用，

demo下载地址：https://github.com/liusi888/vue-value