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
相关文章
- [转] vue中父子组件通信
- 24 什么是Vue组件,如何定义全局组件,组件的复用性,组件的弊端
- vue/react框架中关于组件信息通信引发的面试题
- 05Vue - Vue.js 入门(与自定义元素的关系)
- vue内嵌套其他页面
- 快速掌握Vue.js使用【转】
- 给 vue项目添加ESLint
- Vue--创建组件-template---定义私有组件
- 『前端优化』—— Vue中避免滥用this去读取data中数据
- Vue.js 组件编码规范
- vue组件---自定义事件
- vue stylus的安装及使用方法(报错问题处理)
- Vue+Echarts监控大屏实例五:呼叫中心监控模板实例
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue中ref实现对dom的操作
- Vue对日期进行格式化操作
- checkbox在vue中的用法总结
- vue-cli3快速原型开发
- Vue子组件调用父组件的方法
- 详解vue组件的keep-alive
- 详解vue组件的is特性:限制元素&动态组件
- Vue之mitt事务总线使用方法
- vue组件异步渲染
- vue前台(四点二)
- vue前台(二)在路由配置项中,配置meta属性来影藏组件
- Vue学习第32天——缓存路由组件keep-alive的用法及路由组件独有的2个生命周期函数
- Vue学习第24天——Vuex开发者工具的使用
- vue v-model :
- 【转】制作并发布第一个vue组件的npm包