记录第三天-Vue组件
前言
今天继续整理VUE组件知识点，冲冲冲！！！
一.父子组件传值
父子组件传值大体流程
image.png
1.通过prop往子组件通信
- 父>子
- 1.先给父组件中绑定自定义的属性
- 2.在子组件中使用props接受父组件传递的数据
- 3.可以在子组件中任意使用
Vue.component('Chlid',{
template:`
<div>
<p>我是一个子组件{{chlidDate}}</p>
<input type="text" v-model='chlidDate'/>
</div>
`,
props:['chlidDate']
});
Vue.component('Parent',{
data(){
return{
msg:"我是父组件的数据"
}
},
template:`
<div>
<p>我是一个父组件</p>
<Chlid :chlidDate ='msg' />
</div>
`
});- 子→ 父- 1.在父组件绑定 自定义的事件
- 2.在子组件中触发原生的事件 在函数中使用$emit触发自定义的chlidHandler
// 1. parent 2.Child
Vue.component('Chind',{
template:`
<div>
<p>我是子组件</p>
<input style='text' v-model='chlidData' @input='changeValue(chlidData)'/>
</div>
` ,
props:['chlidData'],
methods:{
changeValue(val){
//$emit(自定义的事件名,消息)
this.$emit('childHandler',val)
}
}
})
Vue.component('Parent',{
data(){
return{
msg:'我是父组件的数据'
}
},
template:`
<div>
<p>我是父组件</p>
<Chind :chlidData = 'msg' @childHandler ='childHandler'/>
</div>
`,
methods:{
childHandler(val){
console.log(val);
}
}
});二.具名插槽
- 插槽 内置组件 slot 做为承载分发内容的出口
- 进行封装组件
<div id="app"></div>
<script type="text/javascript">
Vue.component('myLi',{
template:`
<li>
预留的第一个坑
<slot name='two'></slot>
预留的第二个坑
<slot name='three'></slot>
</li>
`
});
var App={
template:`
<div>
<ul>
<myLi>
<h2 slot='two'>我是第一个坑</h2>
<h3 slot='three'>我是第二个坑</h3>
</myLi>
</ul>
</div>
`
};
new Vue({
el:'#app',
components:{
App,
},
template:`<App/>`
})结尾
在这里整理了 关于组件 父子之间互相传值的方法以及传值过程的流程。能够清楚父子之间的传值，主要运用到props传值方面，在组件之间互相传值的方法还有很多种，在以后我会逐步整理出来，一起学习喜喜。 在这里还有提到具名插槽，运用可以减少代码臃肿的问题，可以让代码简洁一些。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-10，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录