简介
vue中组件是非常核心的部分,也是开发中必须学会的东西。vue组件化开发是一种很重要的思想,它强调多次复用。你写好一个组件中,可以将它应用在任意你想要应用的地方上来。
创建方法
全局注册
<script>
Vue.component(tagName, options)
//其中options为选项,也就是组件对象本身,tagname为组件的名字,只是一种简写方法
</script>
局部注册
<script>
new Vue({
el: '#app',
components: {
'cpn': cpn
}
})
//其中cpn为组件对象,即上面提到的options
//另外,可以使用语法增强写法,直接在对象中写cpn即可,代表着'cpn' : cpn
</script>
传值方法
父传子
<div id="app">
<child :message=test></child>
</div>
<script>
const child = {
props: ['message'],
template: '<span>{{ message }}</span>'
}
new Vue({
el: '#app',
data : {
test: 'hello!'
},
components:{
child
}
})
</script>
通过使用props属性,可以直接调用在标签上被传进来的值。需要注意的是,这个message是不能直接用v-model进行绑定的,要是真想要绑定,请查阅我的上一篇文章,有提到组件v-model的正确用法。
子传父
此时需要使用到自定义事件。
<script>
cpn = {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit('increment',this.counter)
}
},
}
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
incrementTotal: function (counter) {
this.total = counter*2
}
},
components:{
cpn
}
})
</script>
在标签上监听自定义事件,当该自定义事件被子组件使用$emit抛出后,我们即可收到抛出的信息。
父访问子
使用$children属性可以获得所有子组件对象,根据下标可以获得对应的子组件,然后再访问其信息。
使用 r e f s 属 性 , 此 时 子 组 件 标 签 上 需 要 有 r e f 属 性 作 记 号 。 然 后 我 们 就 能 用 refs属性,此时子组件标签上需要有 ref属性作记号。然后我们就能用 refs属性,此时子组件标签上需要有ref属性作记号。然后我们就能用refs.xxx,其中xxx即为刚刚标的记号,这样也能获得子组件对象。
子访问父
$parent访问父组件
$root访问根组件
组件插槽
此处简单介绍(新版有不同的地方):
插槽意味着一个组件可以传入一些新东西作为构成的一部分,这部分叫做插槽。
<cpn>这里放着要插入的部分</cpn> <slot>这里会被插入</slot>
具名插槽就是给插槽指定名字,然后插入前可以选择插槽插入,而不是默认插入位置。
作用域插槽是指插入前可以指定作用域:
要插入的部分加入属性 slot - scope = ‘aaa’
被插入的部分加入变量 :bbb = ‘ccc’,那么
要插入部分就可以通过aaa.bbb要调用变量ccc,即实现了插入前就调用到了被插入组件的信息ccc