菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王龙飞 2023-2-10 [打印本页]

作者: 浅夏ζ 时间: 2023-2-16 18:27
标题: 王龙飞 2023-2-10

一、学习内容：
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集中状态管理

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)