当前位置：首页 > article >正文

Vue.component

article 2024/9/20 13:40:13

组件是可复用的 Vue 实例，且带有一个名字

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  props: ['title'],
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} {{ title }}times.</button>'
})

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

在input上使用 v-model

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

在组件上使用 v-model

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：
通过 Vue 的元素加一个特殊的 is attribute 来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
// currentTabComponent 可以包括
<component v-bind:is="currentTabComponent"></component>

<template>
  <div>
  	<component v-bind:is="currentTabComponent"></component>
    <button @click="changeTab('ComponentA')">Component A</button>
    <button @click="changeTab('ComponentB')">Component B</button>
    <button @click="changeTab('ComponentC')">Component C</button>
  </div>
</template>
<script>
	import ComponentA from './ComponentA.vue';
	import ComponentB from './ComponentB.vue';
	import ComponentC from './ComponentC.vue';
	export default {
	  components: {
	    ComponentA,
	    ComponentB,
	    ComponentC
	  },
	  data() {
	    return {
	      currentTabComponent: 'ComponentA'
	    }
	  },
	  methods: {
	    changeTab(component) {
	      this.currentTabComponent = component;
	    }
	  }
	}
</script>