目录
vue组件的三个元素
props参数
slot自定义插槽
事件自定义事件
基本使用方法
在使用vue-cli创建的项目中，创建组件非常简单。 只需创建新的. vue文件并在template中编写HTML代码，即可完成简单的组件
除了template之外，还包括script和style的完整组件
子组件{ {我的数据} }
导出默认{
props:['data '，' type']，
inheritAttrs: false，
数据()。
return{
我的数据： '是，
}
(，
mounted () }
(，
methods:{
}
}
复制代码
然后，通过将其引入到其他文件的js中进行注册，可以直接使用此组件
importlistfrom ' ./components/head component.vue '
复制代码
另一方面，props:数据父组件被传递给子组件
父母要加入孩子，需要props。 普通的props如下所示。
props:['data '，' type']
复制代码
但是，通用组件的应用场景很复杂，需要向props传递的参数添加验证规则。 一般的格式如下。
props: {
//基础类型检查(null ) (意味着任何类型都可以) ) ) ) ) ) ) ) ) ) ) )。
propa :编号，
//多种类型
propB: [String，Number]，
//一定要传达，是字符串
propC: {
type :字符串
要求：真
(，
//数字，有默认值
propD: {
类型：编号，
默认： 100
(，
//数组/对象的默认值必须从工厂函数返回
propE: {
类型：对象，
默认：函数(
return {消息： ' hello ' }
}
(，
//自定义验证函数
propF: {
validator :函数{
return value 10
}
}
}
复制代码
不建议使用通过props传递的参数，因为父部件中的数据也会同时更改
//vue2.5针对props进行了优化，该问题已不存在
如果需要这样的操作，可以写如下。
let copydata=JSON.parse (JSON.stringify ) this.data ) )
复制代码
为什么不直接写let myData=this.data呢？
直接赋值对对象和数组来说是一个浅拷贝，它指向同一个存储器地址，因为如果一个发生变化，另一个也会发生变化。 另外，在通过JSON进行逆变换后，实现了深度复制的情况下，可以不相互影响。
二.子组件触发父组件事件
典型的组件需要各种事件，如复选框的change事件和组件中按钮的click事件。 在某些情况下，可能需要子组件触发事件并将其传递给父组件
//子组件方法：触发父组件方法，并将参数data传递给父组件
Handlesubmit(data ) {
this.$Emit(submittoparent )，data )。
}
复制代码//父组件调用器组件
.
//在父程序集上触发的方法接收从子程序集传递的参数
部件提交(data ) {
//父组件的逻辑处理
}
复制代码
父组件中的逻辑在父组件中处理，而子组件基于父组件中的数据的逻辑在子组件中处理。
这样会降低耦合性，保证各自的数据不会被污染。
三.记得留一个slot
常见的组件往往无法完美满足所有APP场景
因此，打包组件时，组件的80%功能都已完成，剩下的20%只需要通过solt解决父组件
上面是通用组件，根据场景的不同，右侧的按钮为“处理”和“请求”。 在另一个场景中，必须将按钮切换到“显示”或
者 “删除”在封装组件的时候，就不用写按钮，只需要在合适的位置留一个 slot，将按钮的位置留出来，然后在父组件写入按钮
子组件
父组件
slot按钮
复制代码
开发通用组件的时候，只要不是独立性很高的组件，建议都留一个 slot，即使还没想好用来干什么。
再来个例子：
开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件内部留一个或者多个插口
然后在调用这个子组件的时候加入内容
添加的内容就会分发到对应的 slot 中
slot 中还可以作为一个作用域，在子组件中定义变量，然后在父组件中自定义渲染的方式
子组件：
父组件：
这个示例中，首先在子组件中添加 slot，并在子组件中定义了数组变量 navs
然后在父组件中以作用域 template 添加内容，其中 scope 是固有属性，它的值对应一个临时变量 props
而 props 将接收从父组件传递给子组件的参数 navs
四、Vuex：巧用但不要滥用
子组件向子组件传递数据
Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。
父子组件之间是通过 props 和 自定义事件来传参，非父子组件通常会采用 Vuex 传参
Vuex设计初衷是用来管理组件状态，也可以用于复杂组件的参数传递
但是 Vuex 的虽然可以用来传参，但并不推荐;因为 Vuex 类似于一个全局变量，会一直占用内存
在写入数据庞大的 state 的时候，就会产生内存泄露(人是活的，不能因为事物有弊端就不使用，合理利用即可)。
Tips:
当页面刷新的时候，Vuex 会初始化，同时也会丢失编辑过的数据
如果刷新页面时需要保留数据，可以通过 url 或者 sessionstorage 保存 id，然后 ajax 请求数据
五、组件的css:合理运用 scoped 控制样式作用域
在编写组件的时候，可以在 style 标签中添加 scoped，让标签中的样式只对当前组件生效
但是一味的使用 scoped，肯定会产生大量的重复代码
所以在开发的时候，应该避免在组件中写样式
当全局样式写好之后，再针对每个组件，通过 scoped 属性添加组件样式
六、动态组件
Vue 还可以将多个子组件，都挂载在同一个位置，通过变量来切换组件，实现 tab 菜单这样的效果
这样的功能可以通过路由 vue-router 实现，但路由更适合较大的组件，而且 url 会有相应的改变
Vue 自身保留的 元素，可以将组件动态绑定到 is 特性上，从而很方便的实现动态组件切换
上例中，当 tabView 的值改变，component 就会渲染对应的组件，和路由的效果十分类似，但是地址栏并没有发生改变，但这样一来，每次切换组件都会重新渲染，无法保留组件上的数据。这时可以使用 ** keep-alive ** 将组件保留在内存中，避免重新渲染
七、递归组件
当组件拥有 name 属性的时候，就可以在它的模板内递归的调用自己，这在开发树形组件的时候十分有效
上面是一个子组件，定义了 name 为 simple03，然后在模板中调用自身，结合 v-for 实现递归
为了防止出现死循环，在调用自身的时候，加入了 v-if 作为判定条件
父组件中调用的时候，需要通过 props 传入一个 tree：
最终渲染结果：
其他情况
子组件改变父组件的数据
在vue2.0之后的版本中，不允许子组件直接改变父组件的数据，在1.0的版本中可以这样操作的，但是往往项目需求需要改变父组件的数据，那我们如何变通呢？
当我们把父元素的数据给子组件时，要传一个非基础类型，即传递对象or数组，子组件通过访问对象中的属性操作数据，因为对象和数组是传引用，所以在子组件中修改的时候，父组件也会同步改变，如下：
// 父组件要props传递给子组件的数据
myData:{
info:'父组件信息'
}
// 子组件
change
{{data.info}}
... 省略部分无关代码 ...
props:['data'],
methods:{
change(){
this.data.info = 'change info'
}
}
复制代码
当子组件点击change按钮改变数据的时候，父组件也会同步改变
如果不想影响父组件的值，我们也可以用文章开头讲的JSON颠倒转换的方式，在mounted方法中进行深拷贝，在data中初始化数据时用另一个变量作为承载，这样才承载变量改变，就不会影响父组件该变量的值了。