父子组件关系总结:prop向下传递,事件向上传递。父组件通过prop向子组件下发数据,子组件通过事件向父组件发送信息。
每个vue实例都实现了事件接口:通过
o
n
(
e
v
e
n
t
N
a
m
e
)
监
听
事
件
。
使
用
on(eventName)监听事件。使用
on(eventName)监听事件。使用emit(eventName,optionalPayload)触发事件。父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
1,父组件向子组件传值 通过props数组
父组件:
<template>
<div class="home">
<HelloWorld @click="helloClick" :sendMsgChild="sendMsgChild" />
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
data () {
return {
sendMsgChild:'向子组件传的值'
}
},
mounted () {
},
methods:{
}
}
</script>
2,子组件
<template>
<div class="hello">
<h1 @click="sendMsg">{{ sendMsgChild }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
//校验变量
// props: {
// sendMsgChild:{
// type:String,
// default:'默认值'
// }
// },
props:['sendMsgChild'],
data () {
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>
2,子组件向父组件传值 通过$emit()触发事件向父组件传值。
父组件:定义一个自定义事件getChildFunc,事件名为getChildFunc,接收子组件传递过来的数据。
<template>
<div class="home">
<HelloWorld @click="helloClick" :sendMsgChild="sendMsgChild" @getChildFunc="getChildFunc"/>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
data () {
return {
msgChild: '',
sendMsgChild:'向子组件传的值'
}
},
mounted () {
},
methods:{
helloClick () {
this.msg = '改变后的值'
},
getChildFunc (data) {
this.msgChild = data
}
}
}
</script>
子组件:添加一个click事件,当点击时使用$emit触发事件,将数据传递给父组件
<template>
<div class="hello">
<h1 @click="sendMsg"></h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
message:'子组件向父组件传的值'
}
},
methods:{
sendMsg () {
this.$emit('getChildFunc',this.message)
}
},
mounted(){
}
}
</script>
<style scoped>
</style>
2,兄弟组件传值:
1,建立一个中间桥梁eventVue.js
import Vue from 'vue'
export default new Vue
2,在兄弟组件一中引入:
兄弟组件一:
第一步:引入eventVue.js
第二步:
<div class="hello">
<h1 @click="sendMsg">{{ sendMsgChild }}</h1>
</div>
兄弟组件二:
<template>
<div class="hello">
<h1>{{meg}}</h1>
</div>
</template>
<script>
import bus from '@/js/eventVue'
export default {
name: 'child2',
data () {
return {
meg:'获取兄弟组件的值'
}
},
methods:{
},
created () {
bus.$on('sendBrotherFunc',(val) => {
this.meg = val
})
},
mounted(){
}
}
</script>
<style scoped>
</style>
父组件中引入两个组件:
<HelloWorld @click="helloClick" :sendMsgChild="sendMsgChild" @getChildFunc="getChildFunc"/>
<child2></child2>
3,父组件调用子组件的事件
子组件:
父组件:$refs 父组件获取子组件实例,进而调用子组件方法或者直接修改子组件属性:
$emit() 子组件调用父组件的方法
1,子组件:
<template>
<div class="hello">
<h1>{{meg}}</h1>
<h2>{{mes}}</h2>
<button @click="sendFuncs"></button>
</div>
</template>
<script>
export default {
name: 'child2',
data () {
return {
meg:'',
mes:'子组件属性值'
}
},
methods:{
sendFunc (meg) {
this.meg = meg
},
//子组件触发父组件方法
sendFuncs () {
//第一个参数是父组件监听的事件名,后续参数是父组件方法参数
this.$emit('toParent','我是子组件的方法')
}
},
created () {
},
mounted(){
}
}
</script>
<style scoped>
</style>
父组件:
<template>
<div class="home">
<child2 @toParent="fromChild" ref="child"></child2>
<button @click="getChildClick"></button>
</div>
</template>
<script>
import child2 from '@/components/child2.vue'
export default {
name: 'home',
components: {child2},
data () {
return {}
},
mounted () {},
methods:{
getChildClick() {
this.$refs.child.sendFunc('从父组件传的值')
this.$refs.child.mes = '父组件改变子组件的值'
},
//子组件调用的方法
fromChild (msg) {
console.log(msg)
}
}
}
</script>