vue组件之子组件和父组件

在看官网和学习的过程中，有些不明确子组件和父组件的定义，为了方便后期学习和理解去网站上搜索了一下相关的解释

1.使用的地方是父组件，定义的地方是子组件，虽然他们是同一个组件

2.Vue.component()是制作子组件,<child></child>是制作好了，在父组件环境里面用

 

父组件不用动，子组件直接用props拿就可以了，

子组件传父组件的时候用emit，父组件用on接收，

 

有时候我们经常分不清什么是父组件，什么又是子组件。现在来简单说下：我们将某段代码封装成一个组件，而这个组件又在另一个组件中引入，而引入该封装的组件的文件叫做父组件，被引入的组件叫做子组件。以上是我个人的理解含义，那么现在就直接上代码吧！

子组件：

<template>
<div>
{{msg}}
</div>
<p>{{hello}}</p>
<p>{{hellotests}}</p>
<button @click="btns">按钮</button>
</template>
<script>
export default{
data(){
return{
　　　// 子组件中声明的变量
msg:'',
hello:'',
hellotests:''
}
},
created(){

},
watch:{
// 监听从父组件传过来的数据是否发生改变，然后赋值给变量
CCCount() {
this.msg = this.msgTest
this.hello = this.helloTest
}
},
methods:{
// 点击按钮，子组件操做父组件中的函数
btns(){
this.$emit('childsClick', '子组件触发父组件中的函数')
},
//　被父组件调用的子组件函数
msgs1(){
this.hellotests = '哈哈，我是父组件调用子组件的函数'
}
},
// 接收从父组件传过来的数据
props:['msgTest', 'helloTest', 'CCCount']
}
</script>
父组件：

<template>
<div>
test
</div>
<p>hello world</p>
<span>{{btnVal}}</span>
<msgChild
ref="msgRef"
@childsClick="btnClick"
:msgTest='msgTest2'
:helloTest='helloTest2'
:CCCount='CCCount'
>
</msgChild>
</template>
<script>
　// 引入子组件　
import msgChild from './test.vue'
export default{
data(){
return{
msgTest2:'',
helloTest2:'',
CCCount:0,
btnVal:''
}
},
components:{
// 声明子组件名字
msgChild
},
created(){
this.msgs()
},
methods:{
msgs(){
　　　 // 给子组件变量赋值
this.msgTest2 = '测试1'
this.helloTest2 = '测试2'
},
btnClick(val) {
this.CCCount++
this.btnVal = val
// 触发子组件中的函数
this.$refs.msgRef.msgs1()
}
}
}
</script>
从父组件代码可知，test.vue是子组件，并且在父组件中被命名成 msgChild ,我们在父组件中放置子组件的位置直接写子组件的名字即可，这样就是相当于放置了整个子组件。

先说父组件是怎么传值给子组件的：我们从父组件可知有这些变量，

:msgTest='msgTest2'
:helloTest='helloTest2'
:CCCount='CCCount'
例如：msgTest就是子组件接收的变量（无需再在子组件中声明），需要在子组件中的props中接收（　props:['msgTest', 'helloTest', 'CCCount']　）。msgTest2是父组件的变量，需要在父组件中声明。我只需要在父组件中给msgTest2赋值即可，子组件中的this.msgTest便能接收到。

那么子组件是怎么向父组件中传值的呢？是通过触发父组件中的函数，并传递一个参数来完成传值的，例如：

this.$emit('childsClick', '子组件触发父组件中的函数')
触发父组件中的@childsClick="btnClick"来调用btnClick方法，并向btnClick方法传参 '子组件触发父组件中的函数' ，　通过触发方法来向父组件传值。

父组件又是如触发子组件中的函数呢？答案是通过父组件中的 ref 来触发的，父组件中的　this.$refs.msgRef.msgs1()　便是触发子组件中的msgs1()函数。
————————————————
版权声明：本文为CSDN博主「小鱼儿游啊~游」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gaoxin666/article/details/83279001

转载于:https://www.cnblogs.com/huchong-bk/p/11544084.html