Plugin插件
1,插件是一个对象,必须实现install方法
2,插件需要在Vue文件中使用Vue.use(插件)
3,插件方法:
Vue.extend(.vue文件)继承.vue文件的构造函数
instance.$mount(dom)手动挂咋u
instance.$el实例的真实dom
Vue.protoytpr.$toast = Toast将插件挂载到全局的(所有组建的实例都将拥有插件的方法和属性);
Notify通知插件:
.vue:
template <div class-"notify">{{msg}}</div>
js:
data:
msg 通知的内容
color文本的颜色
bgColor背景颜色
methods:
success(msg),成功提示
warn(msg) 警告
danger(msg)危险警告
show(msg,bgColor,color)显示隐藏
hide()隐藏
组件
作用:
1.组件时Vue的一个重要的特点
2,实现多人协作开发
3,通过组件划分降低开发的难度
4,实现复用,降低重复劳动
组件解释:
组件就是定义好的一功能模块
建议:多用props,少在组件中使用data(降低组件的耦合性,提高复用性)
定义与使用
1,定义
注意:template有且只有一个根节点
2,在父组件中注册
compoments:{steper}
3,在组件的模板中使用
<steper></steper>
传参
父传子:
父
子:
CSS复制代码
1
2
3
props:{
visible:{type:Boolean,default:false}
}
子使用
注意:vue时单项数据流,父组件传递给子组件的props是只读(不能修改)
this.visible
子传父
子:
CSS复制代码
1
this.$emit("update":visible",false)
父:
监听事件,修改值
CSS复制代码
1
<model @update:visible="visible=$event"
插槽
父:
CSS复制代码
1
2
3
4
<model>
<input/>
<button></button>
</model>
子组件 模板中使用
CSS复制代码
1
template:`<div><slot></slot></div>`
具名插槽
插槽作用域
若有收获,就点个赞吧