闲来看了下vue的参考手册,组件这块大概分为几个重要的知识点
一、组件的基本使用
vue-cli 中 是
html:
<base-achievement v-bind:peopleInfo="people" v-bind:infoStyle="allstyle"></base-achievement>
import baseAchievement from '@/components/contentdetail/baseAchievement';
export default {
components:{
baseAchievement,
baseAchievement.vue中是模板内容
字符串形式
HTML:
<div id="example">
<my-component></my-component>
</div>
// 注册
Vue.component('my-component',{
template:'<div>A custom component!</div>'
})
// 创建根实例
newVue({
el:'#example'
})
<ul>
, <ol>
, <table>
, <select>
限制了能被它包裹的元素,<option>
只能出现在其它元素内部。二、组件之间传值
1、父子组件之间传值:不再介绍,上篇博客已经介绍
2、非父子组件
// 触发组件 A 中的事件
bus.$emit('id-selected',1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected',function(id){
})
3、slot(父组件向子组件分发内容)
父组件中有内容,而子组件替换后父组件会把父组件内容遮盖
例
<children>
<span >12345</span>
<span>78902</span>
<!--上面这行不会显示--> 没有写slot
<span slot='first'>12345</span>
<span slot='second'>78902</span>
</children>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
components: {
// children: { //这个无返回值,不会继续派发
// template: "<button>为了明确作用范围,所以使用button标签</button>"
// }
children: { //这个无返回值,不会继续派发
template: "<button><slot name='first'></slot>为了明确作用范围,所以使<slot name='second'></slot>用button标签</button>"
}
}
});
</script>
三、动态组件(可以通过动态组件实现tab切换效果)
<classB :is="currentTab" keep-alive(避免重新渲染)></classB>
可以通过点击切换currentTab实现组件的动态切换
大致就这些,其他复杂的还未接触;