vue-组件那些事

组件注册

• 全局注册

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

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

• 单文件组件注册

// HelloWorld.vue文件<template>
  <h3>hello world，你好，世界</h3></template><script>export default {  name: 'HelloWorld'}</script>// app.vue   需要使用哪个组件，就把哪个组件引进来<template>
  <div class="app">
    <HelloWorld></HelloWorld>
  </div></template><script>import HelloWorld from './HelloWorld.vue'export default {  name: 'app',  components: {
    HelloWorld
  }
}</script>

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

// HelloWorld.vue文件<template>
  <h3>hello world</h3>
  <slot></slot>      //<slot>我爱世界</slot>  我爱世界便为插槽默认值</template><script>export default {  name: 'HelloWorld'}</script>// app.vue   需要使用哪个组件，就把哪个组件引进来<template>
  <div class="app">
    <HelloWorld>您好世界</HelloWorld>
  </div></template><script>import HelloWorld from './HelloWorld.vue'export default {  name: 'app',  components: {
    HelloWorld
  }
}</script>

• 注意事项

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

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

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

组件通信

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

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

// HelloWorld.vue文件<template>
  <input type="text" v-model="customMsg" v-on:change="changeMsg($event)"></template><script>export default {  name: 'HelloWorld',  props:{    msg: String
  },  data: function() {    return {      customMsg: this.msg
    }
  },  methods: {
    changeMsg($event) {      this.$emit('changeParentMsg',$event.target.value)
    }
  }
}</script>

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

// app.vue<template>
  <div class="app">
    <p>{{message}}</p>
    <HelloWorld v-bind:msg="message" v-on:changeParentMsg="changeMsg($event)"/>
  </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default {  name: 'app',  components: {
    HelloWorld
  },  data: function() {    return {      message:'hello'
    }
  },  methods: {
    changeMsg(value) {      this.message = value
    }
  }
}</script>

• 注意事项

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

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

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