Vue父子组件在平时开发项目的时候很常用，所以特地来写一篇文章，巩固一下自己这方面的知识
父子组件简单来讲就是在一个vue容器引入另外一个或者多个vue容器，这样可以提高组件的复用性
如何实现父子组件呢？我们先在同一目录下分别创建parent.vue和children.vue两个文件，写入如下代码
嫌麻烦的直接拉到最下面看总结
//parent.vue
<template>
<div>
This is a parent content
<children></children> //这里就包含了children.vue的所有内容了
</div>
</template>
<script>
import children from './children' //引入组件
export default{
components:{ children }, //注册组件
data(){
return{
}
}
}
</script>
//children.vue
<template>
<div>
This is children component content
</div>
</template>
<script>
export default{
data(){
return{
}
}
}
</script>
这样就是一个简单的父子组件了。
那么接下来父子组件间怎么通信就是一个很重要的问题了。下面逐一演示
父组件 (传数据) -> 子组件 ↓
核心①：父组件用v-bind绑定数据名和数据内容 -> v-bind:dataname="content"
核心②:：子组件使用props来接受数据 -> props: ['dataname']
//parent.vue
<children v-bind:for-children-data="data"></children> // 在子容器上绑定要传递的数据
<script>
export default{
data(){
return{
data： 'from parent data' //要传递给子组件的数据
}
}
}
</script>//children.vue
<script>
export default{
props: ['for-children-data'], //使用props来接受父组件传来的数据
data(){
return{
}
}
}
</script>父组件 调用 子组件的方法 ↓
核心① ：在父组件里的 子组件标签使用ref属性来进行绑定 ref="bindChildrenName"
核心②：在父组件里的methods调用: 语法为 this.$refs.ref属性绑定的名字.子组件的方法名()
//parent.vue
<children ref="refChidlren"></children> //使用ref属性绑定子组件
<script>
export default{
data(){
return{
}
},
methods:{
this.$refs.refChidlren.childrenMethod() //这样就可以调用指定子组件的方法了
}
}
</script>//children.vue
<script>
export default{
data(){
return{
}
},
methods:{
childrenMethod(){
console.log('父组件调用了我') //这里可以是子组件内部自己调用，不局限于父组件
}
}
}
</script>子组件 (传数据) -> 父组件 ↓
核心①： 在父组件里的 子组件标签使用-von属性来进行绑定父组件的方法名 v-on:子组件调用名="父组件方法名"
核心②：在子组件里使用 this.$emit('子组件调用名',args)进行显式调用
其实这个传数据还是要调用父组件方法,没有刚才父组件那样直接传数据即可，可能是考虑到父与子的关系是一对多
//parent.vue
<children v-on:fromChild="parentMethod"></children> // 在子容器上绑定要传递的数据
<script>
export default{
data(){
return{
},
methods:{
parentMethod(argsFromChild){ //这个方法同样也是父子组件可以调用
console.log(argsFromChild 是从子组件传来的数据)
}
}
}
}
</script>//children.vue
<script>
export default{
data(){
return{
}
},
methods:{
this.$emit('fromChild',args) //在子组件里显示的调用父组件的方法
}
}
</script>子组件 调用 父组件的方法 ↓
核心① ：在父组件里的 子组件标签使用ref属性来进行绑定 ref="bindChildrenName"
核心②：在父组件里的methods调用: 语法为 this.$refs.ref属性绑定的名字.子组件的方法名()
//parent.vue
<children"></children> // 子组件调用父组件的方法不用进行绑定
<script>
export default{
data(){
return{
},
methods:{
parentMethod(args){
console.log('子组件直接调用我')
}
}
}
}
</script>//children.vue
<script>
export default{
data(){
return{
}
},
methods:{
this.$parent.parentMethod(args) //在子组件直接调用父组件的方法
}
}
</script>总结：
①父组件 传数据 子组件
parent.vue： <children v-bind:toChildData="parentSourceData"></children>
children.vue： props:['oChildData']
②父组件 调用 子组件 方法
parent.vue： <children ref="refChildrenName"></children>
method: this.$refs.refChildrenName.子组件的方法名()
③子组件 传数据 父组件
parent.vue： <children v-on:fromChild="parentMethod"></children>
children.vue： this.$emit('fromChild',args)
④ 子组件 调用 父组件方法
parent.vue： <children></children>
children.vue： this.$parent.parentMethod(args)