Vue组件插件

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>`

具名插槽
插槽作用域

若有收获，就点个赞吧