• Vue研习录（07）——组件基础知识详解及示例分析

    Vue研习录（07）——组件基础知识详解及示例分析

    版权声明

    • 本文原创作者：清风不渡
    • 博客地址：https://blog.csdn.net/WXKKang

      重拾前端记忆，记录学习笔记，现在进入组件基础知识部分

    一、什么是组件

      组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。

    二、定义组件

      Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板、逻辑与样式封装在单个文件中
    在这里插入图片描述

    三、加载组件

      加载组件需要以下三步：

    第一步：引入组件
    第二步：挂载组件
    第三步：显示组件

      示例如下：
      新建Vue文件：MyComponents

    <template>
    <h3>清风不渡h3>
template>
  
<script>
  export default {
    name : "MyComponents",

  }
script>
  
<style>
  h3{
    color: yellowgreen;
  }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

      在App.vue中进行加载：

    <template>
  <img alt="Vue logo" src="./assets/logo.png">
  
  <MyComponentsVue/>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// 第一步：引入组件
import MyComponentsVue from './components/MyComponents.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
    // 第二步：挂载组件
    MyComponentsVue
  }
}
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

      结果如下：

    在这里插入图片描述

    被加载的组件可以被重用任意多次

    四、scoped属性

      值得注意的是，如果多个组件中含有同样式指向的标签时，他们的显示是相同的，例如：
      上方的HelloWorld组件中也有一个h3标签，那么MyComponents组件中的style样式也同样适用于它：

    <template>
  <div class="hello">
    <h3>这是hello world组件h3>
    <input type="text" v-model="message">
    <p>message is : {{ message }}p>
  div>
template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  }
}
script>

<style>

style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

      结果如下：
    在这里插入图片描述

      如果不需要这样，则需要在