全局化注册组件
Vue.component('qw', {
template:`<divstyle="color:red;">全局化注册</div>`
})
局部注册组件局部注册组件和全局注册组件是向对应的,局部注册的组件只能在组件注册的作用域里进行使用,其他作用域使用无效。
varapp = newVue({
el:'#app',
components: {
"qw": {
template:`<divstyle="color:red;">局部注册的panda标签</div>`
}
}
})
Component 组件props 属性设置
<divid="app">
<!-- 此处qw对应components中的请问,直接为它赋值 -->
<qwqwe="12345"></qw>
</div>
<script>
varapp = newVue({
el:'#app',
data: {
message: qqqqq
},
components: {
"qw": {
//这个属性会自动获取值
props: ['qwe'],
template:`<divstyle="color:red;">{{qwe}}</div>`
}
}
})
在构造器里向组件中传值
<qw v-bind:here="message"></qw>此时它的值为data里面的message的值,并且绑定了
Component 父子组件关系
//子组件
varasd = {
template:`<div>asd</div>`
}
//父组件
varqw = {
template:`<div>
<p> qw</p>
<asd></asd>
</div>`,
components: {
"asd":asd
}
}
varapp = newVue({
el:'#app',
components: {
"qw":qw
}
})
Component 标签
<component></component>标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。
<componentis="qw"></component>
使用is来决定使用哪一个组件,这样就是使用的qw组件