为了账号安全,请及时绑定邮箱和手机立即绑定

组件划分(父组件向子组件传递信息)----记录每天的学习

标签:
Vue.js

vue里面组件的划分:
1、功能模块: 如 select pagenation ...
2、页面区域: 如 header footer sidebar ...
图片描述
Vue组件的实现---components
1、app.vue里面引入组件
2、通过components 来注册组件
图片描述
如:
import Header form './header'
import Footer form './footer'
new Vue({
data:{
isShow:true
},
components:[
Header,Footer
]
})

Vuejs组件之间的通信---props
1、先注册
2、props 是属性的意思

如:
//this is header.vue
new Vue({
data:{username:'xx'},
props:['msg'], //获得app.vue里面header的属性msg传过来的值
methods:{
doThis:function(){ //通过dothis 方法里面获得this.msg
console.log(this.msg)
}
}
})

//this is header.vue
<header msg='something interesting'></header> //msg属性可以传递任何值到app.vue
<footer></footer>

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消