浅谈 vue 中的组件

一、初识组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

1、定义组件

Vue 自定义组件分为两种：全局注册和局部注册，全局组件可以在任何地方引用，局部组件只能在当前 Vue 实例使用。

1. 全局注册 放在通过 new 创建的 Vue 实例当中

   Vue.component('my-component', {template: '<p> 我是被全局注册的组件 </p>'})
   /*
     Vue.component(组件名称 [ 字符串], 组件对象 )
   */ 
   new Vue({
     el: '#app',
     template: '<my-component></my-component>'
   })
   
   

2. 局部注册

   const child = {template: '<p> 我是局部注册的组件 </p>'}
   /*
      通过 components 选项属性进行局部注册：components: {组件名称 [ 字符串]: 组件对象
      }
   */ 
   new Vue({
     el: '#app',
     template: '<my-component></my-component>',
     components: {'my-component': child}
   })
   

二、自定义事件

自定义事件原理

通过 $emit(event) 触发一个自定义事件

然后通过 $on(event,callback) 去执行对应的 callback(回调函数)

（两个 event 是字符串，且必须名称相同）

但 $on 不能在父组件中监听子组件抛出的事件，所以我们要做到这一点，可以在父组件的模板中使用到子组件的时候，直接用 v -on 绑定（和 $on 作用效果一致）

三、组件通信

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners 和 provide/inject 等

1、方法一 props/$emit

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

• 父组件向子组件传值

  //App.vue 父组件
  <template>
    <div id="app">
      <users v-bind:users="users"></users>// 前者自定义名称便于子组件调用，后者要传递数据名
    </div>
  </template>
  <script>
  import Users from "./components/Users"
  export default {
    name: 'App',
    data(){
      return{users:["Henry","Bucky","Emily"]
      }
    },
    components:{"users":Users}
  }
  //users 子组件
  <template>
    <div class="hello">
      <ul>
        <li v-for="user in users">{{user}}</li>// 遍历传递过来的值，然后呈现到页面
      </ul>
    </div>
  </template>
  <script>
  export default {
    name: 'HelloWorld',
    props:{
      users:{           // 这个就是父组件中子标签自定义名字
        type:Array,
        required:true
      }
    }
  }
  </script>

• 子组件向父组件传值

  子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

  
  <template>
    <header>
      <h1 @click="changeTitle">{{title}}</h1>// 绑定一个点击事件
    </header>
  </template>
  <script>
  export default {
    name: 'app-header',
    data() {
      return {title:"Vue.js Demo"}
    },
    methods:{changeTitle() {this.$emit("titleChanged","子向父组件传值");// 自定义事件  传递值“子向父组件传值”}
    }
  }
  </script>
  // 父组件
  <template>
    <div id="app">
      <app-header v-on:titleChanged="updateTitle" ></app-header>// 与子组件 titleChanged 自定义事件保持一致
     // updateTitle($event) 接受传递过来的文字
      <h2>{{title}}</h2>
    </div>
  </template>
  <script>
  import Header from "./components/Header"
  export default {
    name: 'App',
    data(){
      return{title:"传递的是一个值"}
    },
    methods:{updateTitle(e){   // 声明这个函数
        this.title = e;
      }
    },
    components:{"app-header":Header,}
  }
  </script>

2、方法二 $emit/$on

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件, 巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级 。当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。

1. 例子

    <div id="app">
         <v-about></v-about>
         <hr />
         <v-more></v-more>
       </div>
       <template id="about">
         <div>
           我是 about 组件
           <button @click="toMore"> 我要把 about 中的数据传给 more</button>
         </div>
       </template>
       <template id="more">
         <div>
           我是 more 组件
         </div>
       </template>
       <script src="../vue.js"></script>
       <script>
         //about------>more
         const eventBus = new Vue(); // 中央事件总线
   
         const More = {
           template: `#more`,
           data() {
             return {msg: '我是用来接收从 about 传过来的数据'};
           },
           mounted() {eventBus.$on('FormAboutToMore', function(data) {
               this.msg = data;
               console.log(this.msg);
             });
           }
         };
         const About = {
           template: `#about`,
           data() {
             return {msg: '我是 about 中的数据'};
           },
           methods: {toMore() {eventBus.$emit('FormAboutToMore', this.msg);
             }
           }
         };
         const app = new Vue({
           el: '#app',
           data() {
             return {msg: '我是根组件的数据'};
           },
           methods: {},
           components: {
             'v-about': About,
             'v-more': More
           }
         });
       </script>