5.1 自定义组件 – 老虫儿的笔记本

组件的定义
- 组件（Component）是对数据和方法的简单封装。
Vue中的组件
- 组件是可复用的Vue实例，在开发过程中，我们可以把重复用到的功能封装成自定义组件
组建的注册
- 组件的注册分全局注册和局部注册两种，我们一般采用局部注册
- 局部注册：在单个Vue格式的文件中创建组件，在需要用到的地方进行注册
局部注册组件的步骤
1. 创建.vue文件，编写组件的代码，在export default{}中为组件命名
2. 在App.vue中使用组件
  1. 在<script>中引入组件：import 组件名 from ‘@/components/组件所在文件的名称.vue’;(PS:”@”符号是一种别名的写法，这里代表”src”路径)
  2. 在compinents{}中注册组件（即写入组件的名称）
  3. 在template的div中使用组件（使用方法与标签类似）
组件中的数据
- 自定义组件内的数据data必须是一个函数
  - ```
  data: function () {
    return {
      count: 0
    }
  }
```
- 所以重复使用的组件间的data时相互独立的

练习

在vue.app中使用两次自定义组件

@/components/HelloVue.vue’

<template>
  <div class="hello">
    <!-- 在页面上显示 str 的值 -->
    <h1> {{str}} </h1>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  // 声明 data 数据
  data: function() {
    return {
      str: '一个 vue 组件'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
  font-size: 20px;
}
</style>

@/app.vue

<template>
  <div id="app">
    <!-- 使用组件 -->
    <Hello></Hello>
    <Hello></Hello>
  </div>
</template>

<script>
// 引入组件
import Hello from '@/components/HelloVue.vue';

export default {
  name: 'app',
  // 注册组件
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

PS：组件不需要和所在文件同名

发表评论 取消回复

发表评论取消回复