ITPub博客

首页 > IT职业 > IT图书 > 组件划分(父组件向子组件传递信息)----记录每天的学习

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

IT图书 作者:zhjhome 时间:2021-09-09 09:05:00 0 删除 编辑

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

//msg属性可以传递任何值到app.vue

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2530/viewspace-2799167/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-16

  • 博文量
    102
  • 访问量
    952