一、学习内容:
1.组件构造器
1.创建组件(构造器)
Vue.extend({})
const obj = Vue.extend({
// 组件的模板
template: '<div>我是组件</div>'
});
2.注册组件
Vue.comments('组件名', 构造器);
Vue.component('abc', obj);
3.使用
<abc></abc>
2.动态组件
<component :is="需要显示组件名称"></component>
keep-alive组件
避免重新渲染导致性能问题
keep-alive>
<component v-bind:is="name"></component>
</keep-alive>
3.父传子--props
1.父亲把data中的数据用自定义属性的方式传递给子组件
<son :fname="fname"></son>
2.子组件用props属性接收
props: ['fname',‘msg’],
props可以是数组或者对象,对象以键值对形式呈现
3.在子组件中的template中使用
{{fname}}{{msg}}
4.子传父--$emit派发事件
1.子组件调用方法
<button @click="call">点我</button>
2.$emit会触发callpapa事件
this.$emit('callpapa');
3.自定义组件callpapa将父组件的msg方法传递给子组件
<son @callpapa="msg"></son>
5.平行组件--eventbus
6.嵌套组件--provide&&inject
7.vuex集中状态管理 |
|