Vue - 自定义组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wxw20147854/article/details/82829096

这篇文章介绍Vue的自定义组件。

定义全局组件的第一种方式：
html代码：

定义全局组件的第二种方式：
html代码：

定义全局组件的第三种方式：
html代码：

常用的方式是第三种，原因：
（1）在工作中模板中肯定有很多标签，在一个字符串中写入很容易出错，故用第一二种出错率高
（2）将模板提取出来更容易复用

定义局部组件的方式：
html代码：

组件名称的大小写问题：
（1）官方强烈推荐要遵循W3C规范的自定义组件名，即组件名称全部使用小写字母且用 - 连接
（2）组件名称可以使用驼峰命名法，但是在使用的时候必须大写转小写，且用 - 连接，例如：


组件模板问题：
（1）在模板中，极少只有一个元素节点，一般情况下都有大量的元素节点，这种情况下，必须用一个div包裹所有的元素节点，否则就会报错，这是强制规定的。例子就是定义全局组件的第三种方式

自定义组件的data问题：
（1）在自定义组件中，data不再是一个对象，而是一个function，且这个function必须返回一个对象。例如：
html代码：

父组件向子组件的问题 ：
（1）组件不能不能互相使用对方的data、methods等
（2）可以通过父组件可以通过props向子组件传值、子组件可以通过function向父组件返回值

父组件向子组件传值的例子：
html代码：
注：在props中我们进行属性命名时，推荐不要使用驼峰命名法；在组件上进行绑定的时候禁止使用驼峰命名法，否则会报警告，且不会生效；在模块里面进行属性的引用时必须使用驼峰命名法，否则会找不到该属性，详情见上面代码中的红框。

子组件通过function返回值给父元素的例子：
html代码：
注：在 this,$emit(”方法名“, 参数) 中，经过实测，方法名不要使用驼峰命名法，因为在组件上绑定这个方法名时Vue不准使用驼峰命名法，必须使用连字符；若是绑定使用连字符、方法名用的驼峰命名法，会导致找不到该方法，不会被调用

组件之间切换问题：
（1）使用<component :is="组件名称变量"></component>，通过修改data中的“组件名称变量”就可以进行组件之间的切换了
（2）要实现组件切换时候的动画效果，可以用transition元素包裹即可；要实现动画模式，可以添加mode属性（out-in、in-out等）

结论：
（1）使用props可以实现父子组件之间的传值
（2）使用this.$emit()可是实现子组件调用父组件的方法