浅谈Vue 中的组件

浅谈 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>