P12. vue3 组件基本使用

组件基础

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

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })

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

组件的复用

你可以将组件进行任意次数的复用：

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

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

data 必须是一个函数
当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

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

data: function () {
  return {
    count: 0
  }
}

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

组件测试实例

App.vue

<script>
  import Content from "./components/Content.vue";
  export default {
    data() {
      return {

      };
    },
    components:{
      Content
    }
  }

</script>

<template>
  <div>
    <Content></Content>

  </div>

</template>

Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <Hello_kugou></Hello_kugou>
    <h2> content hello </h2>
    <Hello_kugou></Hello_kugou>
  </div>
</template>

<script>
import Hello_kugou from "./Hello_kugou.vue";
export default {
  components:{
    Hello_kugou
  },
  name: "Content"
}
</script>

<style scoped>

</style>

Hello_kugou.vue

<template>
  <div>
    <h2>hello kugou</h2>
  </div>
</template>

<script>
export default {
  name: "Hello_kugou"
}
</script>

<style scoped>

</style>