7. vue2 组件初解

一、 新建一个组件

一般在 src/components 目录下面创建一个 .vue 的文件来保存新建的组件

1.1 vue 中组件的构成

vue 中组件由三部分构成：

• 模板
• js代码
• 样式

其中，模板是 <template></template> 中间的内容，用于放置组件的 html 代码；js 逻辑放置在 <script> </script> 标签中；样式放置在 <style> </style> 标签中。

1.2 组件模板必须有一个根节点

模板中必须有一个根节点，这是 vue 的规范，必须遵循。下面示例中 div 元素就是这个根节点。

<template>
  <div>
    hello vue
</template>

1.3 组件中配置局部样式的方法

组件中样式如果不做处理会是全局样式，若想样式只在本组件中生效（即变为局部样式），需要在 <script> </script> 标签上添加 scoped 属性

<style lang="scss" scoped>

    /*css  局部作用域  scoped*/

    h2{

        color:red
    }

    
</style>

1.4 一个完整的组件示例

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    <h2>{{ msg }}</h2>
    <button @click="run()">执行run方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是一个首页组件msg",
    };
  },
  methods: {
    run() {
      alert(this.msg);
    },
  },
};
</script>

<style lang="scss" scoped>
/*css  局部作用域  scoped*/
h2 {
  color: red;
}
</style>

二、 如何使用组件

2.1 引入组件

引入组件的动作是在 <script> </script> 标签中进行的，使用的是 nodejs 的模块机制 ，像下面一样引入一个组件：

<script>
import Home from "./components/Home.vue";
</script>

2.2 挂载组件

挂载组件的动作是在 components 字段（components 字段是一个对象）中添加一个属性，其中此属性的值是挂载组件将要在本 vue 模板中使用的标签,应需注意
此标签不要和现有的 html 标签相同； 属性的值就是引入的组件。

<script>
import Home from "./components/Home.vue";

export default {
  data() {
    return {
      msg: "你好vue",
    };
  },
  components: {
    /*前面的组件名称不能和html标签一样*/
    "v-home": Home,
  },
};
</script>

ps： 同一个组件可以被多个不同的组件挂载，重复使用。

2.3 在模板中使用组件

直接在模板中使用挂载过的组件的标签即可。

<template>
  <div id="app">
    <v-home></v-home>
  </div>
</template>

2.4 一个完整的使用组件的示例

<template>
  <div id="app">
    <v-home></v-home>
  </div>
</template>

<script>
/*
  1、引入组件
  2、挂载组件
  3、在模板中使用
  */
import Home from "./components/Home.vue";
export default {
  data() {
    return {
      msg: "你好vue",
    };
  },
  components: {
    /*前面的组件名称不能和html标签一样*/
    "v-home": Home,
  },
};
</script>

<style lang="scss"></style>