vue-组件那些事

• 全局注册

Vue.component('HelloWorld', { 
  template: 'hello world，你好，世界'})

之后就可以在任何地方使用HelloWorld组件了。

• 单文件组件注册

// HelloWorld.vue文件// app.vue   需要使用哪个组件，就把哪个组件引进来

• slot分发
  我们可以发现原生的标签是可以插入内容的，例如hello，要想我们写的自定义组件也可以这样hello，就要用到slot。最终会用之间的内容替换掉slot。除此之外，还可以为插槽设置默认值，定义具名插槽等。

// HelloWorld.vue文件// app.vue   需要使用哪个组件，就把哪个组件引进来

• 注意事项

  • 组件名称可以使用大驼峰命名方式，也可使用连字符命名方式，看个人习惯，保持统一即可。

  • 组件是可复用的 Vue 实例，可以进行任意次数的复用。

  • 一个组件的 data 选项必须是一个函数。

• 父子组件的通信
  父组件通过属性prop与子组件进行通信，子组件通过事件与父组件进行通信。

• 例子说明
  用一个非常简单的例子说明父子组件是如何通信的。
  假设有一个HelloWorld子组件，接受一个msg属性，用来初始化输入框的值。为输入框绑定change事件，事件方法为changeMsg，在该方法中，手动触发自定义事件changeParentMsg，并将输入框的值作为参数传递出去。

// HelloWorld.vue文件

有一个app.vue组件，该组件将message通过msg属性传递给HelloWorld组件，完成父与子的通信过程。该组件绑定HelloWorld组件的自定义事件changeParentMsg，当该事件被触发后，调用changeMsg方法，改变message的值，完成子与父的通信。

// app.vue

• 注意事项

  • props是只读的，子组件不能直接修改属性。子组件可以将用属性初始化自己的本地数据（就是data函数返回的对象），然后修改自己本地的数据。

  • 可以进行自定义props验证。

作者：tiancai啊呆
链接：https://www.jianshu.com/p/8afaa84cadaf