vuejs中父子组件之间通信方法实例详解
本文实例讲述了vuejs中父子组件之间通信方法。分享给大家供大家参考，具体如下：
一、父组件向子组件传递消息
// Parent.vue
<template>
<div class="parent">
<v-child :msg="message"></v-child>
</div>
</template>
<script>
import VChild from './child.vue'
export default {
components: {
VChild
},
data () {
return {
// 父组件将message作为参数传入子组件中
message: '来自父组件消息'
}
}
}
</script>
// Child.vue
<template>
<div class="child">
<h1>child</h1>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
// 通过props定义外部系统可以传入的参数
// 定义了一个msg变量，类型是String,默认是空字符串
props: {
msg: {
type: String,
default: ""
}
}
}
</script>
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Parent from '@/test/Parent'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/parent',
component: Parent
}
]
})
二、子组件向父组件传递消息
// Parent.vue
<template>
<div class="parent">
<v-child :msg="message" @childNotify="childNotify"></v-child>
</div>
</template>
<script>
import VChild from './child.vue'
export default {
components: {
VChild
},
data () {
return {
// 父组件将message作为参数传入子组件中
message: '来自父组件消息'
}
},
methods: {
childNotify (params) {
console.log(params)
}
}
}
</script>
// Child.vue
<template>
<div class="child" @click="notifyParent">
<h1>child</h1>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
// 通过props定义外部系统可以传入的参数
// 定义了一个msg变量，类型是String,默认是空字符串
props: {
msg: {
type: String,
default: ""
}
},
methods: {
notifyParent () {
var params = {
m: 1,
n: 2
}
// 子组件以事件的形式通知父组件(需要使用$emit方法，第一个参数，事件名称；第二个事件附带的参数)
this.$emit('childNotify', params)
}
}
}
</script>
参考：https://jingyan.baidu.com/article/455a99505b639da1662778e1.html
希望本文所述对大家vue.js程序设计有所帮助。
赞 (0)