浅谈Vue-中的组件

jiezi

6 年前

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

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

通过 $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-中的组件

浅谈 vue 中的组件

一、初识组件

1、定义组件

二、自定义事件

自定义事件原理

三、组件通信

1、方法一 props/$emit

2、方法二 $emit/$on