浅谈Vue 中的组件

浅谈 vue 中的组件

一、初识组件

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

1、定义组件

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

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

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

局部注册

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

preview

二、自定义事件

自定义事件原理

通过$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。

例子

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

浅谈Vue 中的组件