一:全局组件和局部组件
父和子,使用的父,被用的是子
父需要声明子组件,引入子组件对象,声明方法如下:
引入子组件对象 在app.vue中
import headerVue from './xxx.vue'
components:{
headerVue:headerVue
}
<header-vue></header-vue>
全局组件,使用更为方便,不需要声明,直接用
在main.js中引入一次,在main.js中使用vue.component('组件名',组件对象);
import headerVue from './components/header.vue'
Vue.component('headerVue',headerVue);
<header-vue></header-vue> 这个在app.vue中使用
二:组件间传值
注意:父组件传值给子组件
子组件接收父组件值参数的设置
父组件通过子组件的属性将值进行传递
方式有2:
常量: prop1="常量值"
变量: :prop2="变量名"
子组件需要声明
根属性props:['prop1','prop2']
在页面中直接使用 {{prop1}}
在js中应该如何使用prop1? this.prop1获取
app.vue中
<header-vue textone="大"></header-vue> 常量
<body-vue -bind:texttwo="text2"></body-vue> 变量
export default{
data(){
return{
text2="哈哈呵呵"
}
}
}
header.vue
<div>
我是{{textone}}头
</div>
export default{
data(){
return{
}
},
//接受父组件值参数的设置
props:['textone']
}
Vue.js基础总结(三)
猜你喜欢
转载自blog.csdn.net/a3060858469/article/details/80643902
今日推荐
周排行