本篇文章主要讲解父组件与子组件经常使用的联动通信方式。
通信第一步当然是将子组件引入父组件啦
1、全局引入(在main.js文件中引入并注册)
import assembly from '@/views/components/assembly'
Vue.component('assembly',assembly) // 第一个参数 全局组件的名字(字符串类型),第二个参数:父组件使用引入的组件名(一般都与组件名保持一致)
2、局部引入
//在父组件中引入
import Assembly from '@/views/components/assembly'
export default {
components: {
Assembly
},
}
//在父组件中使用子组件
<Assembly></Assembly>
一、props属性绑定(父组件向子组件传递数据)
在子组件中可以通过props属性接收父组件传值
例:父组件代码
<Assembly title="父组件传值"></Assembly>
//也可以通过 v-bind 动态赋值
<Assembly :title="title"></Assembly>
//如是通过v-bind动态赋值,需在data中定义
data(){
return{
title: '', //不限类型(字符串、数字、对象、数组等不限)
}
}
子组件接收代码(props多种写法)
1、字符串数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],
2、指定props值类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise,
}
3、指定 prop 的验证要求,当 prop 验证失败的时候,(开发环境构建版本的) 将会产生一个控制台的警告。
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
title: Number,
// 多个可能的类型
title: [String, Number],
// 必填的字符串
title: {
type: String,
required: true
},
// 带有默认值的数字
title: {
type: Number,
default: 100
},
// 带有默认值的对象
title: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
title: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
},
注意: prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
二、监听子组件事件(子组件向父组件或兄弟组件传递数据,子组件触发父组件或兄弟组件方法)
在子组件中可以通过this.$emit自定义一个事件提交给父组件,触发父组件的方法,父组件通过监听子组件的自定义事件可以接收子组件传递的数据。
例:子组件代码
//子组件A
<template>
<div>
<h1>{{ title }}</h1>
<button @click="changeParentTitle">点击更改父组件title</button>
</div>
</template>
<script>
export default {
props:{
title
},
data(){
return{
title: '',
}
},
mounted(){},
methods:{
changeParentTitle(){
this.$emit("childEvent", "子组件传给父组件的title")
//第一个参数是提交的事件名,后面的参数可以是需要传递给父组件的参数
},
},
}
</script>
父组件代码
<template>
<div>
<Assembly :title="title" @childEvent="changeTitle"></Assembly>
</div>
</template>
<script>
import Assembly from '../components/assembly.vue'
export default {
components:{
Assembly
},
data(){
return{
title: '',
}
},
mounted(){},
methods:{
changeTitle(val){
console.log(val)//val为子组件传过来的数据
}
},
}
</script>
<style>
兄弟组件代码
//子组件B
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
props:{
title
},
data(){
return{
title: '',
}
},
mounted(){
this.$on("childEvent",(val)=>{//监听事件childEvent,回调函数要使用箭头函数;
console.log(val);//val为A组件传过来的数据
})
},
methods:{},
}
</script>
三、使用$parent(子组件访问父组件的数据和方法)
this.$parent可以用来从一个子组件访问父组件的实例
子组件代码
<template>
<div>
<h1>{{ title }}</h1>
<button @click="onMethod">调用父组件方法</button>
</div>
</template>
<script>
export default {
props:{
title
},
data(){
return{}
},
mounted(){
this.title = this.$parent.title //获取父组件中title的数据
},
methods:{
onMethod(){
this.$parent.onSubmit() //调用父组件的方法onSubmit()
},
},
}
</script>
四、使用 $refs (父组件访问子组件的数据和方法)
父组件使用 $refs 可以访问子组件的数据和方法,使用时需在调用子组件时给子组件定义一个 ref 名
例:父组件代码
<template>
<div>
<Assembly ref="childrenDemo"></Assembly>
<button @click="onMethod">调用父组件方法</button>
</div>
</template>
<script>
import Assembly from '../components/assembly.vue'
export default {
components:{
Assembly
},
data(){
return{
title: '',
}
},
mounted(){},
methods:{
onMethod(val){
let child = this.$refs.childrenDemo //获取子组件实例
console.log(child.value); //访问子组件属性
child.childFn() //调用子组件的childFn()方法
}
},
}
</script>
<style>