程序员经验分享-hwhale

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

2023-10-26

版权声明

  • 本文原创作者：清风不渡
  • 博客地址：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>

  在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>

  结果如下：

在这里插入图片描述

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

四、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>

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

  如果不需要这样，则需要在<style>中添加scoped属性，使得当前样式只在当前组件中生效，如下：

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

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

  结果如下，非MyComponents组件的样式将不会收到影响：

在这里插入图片描述

五、props组件交互

  组件和组件是需要存在交互的，那么我们可以使用props来在组件上注册一些自定义的attributes，示例如下：

  我们在App.vue中声明title，并将其进行传输到MyComponentsVue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 第三步：显示组件 -->
  <MyComponentsVue :title="title"/>
  <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',
  data(){
    return{
      title : "清风不渡"
    }
  },
  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>

  在MyComponents.vue中进行接收并显示

<template>
    <h3>props组件交互</h3>
    <p> {{ title }} </p>
</template>
  
<script>
  export default {
    name : "MyComponents",
    props : {
        title : {
            type : String,
            default : ""
        }
    }
  }
</script>
  
<style scoped>
  h3{
    color: yellowgreen;
  }
</style>

  结果如下：

在这里插入图片描述

传递数据的数量以及数据的类型没有限制
数组和对象必须使用函数进行返回

<script>
  export default {
    name : "MyComponents",
    props : {
        title : {
            type : String,
            default : ""
        },
        arrays : {
            type : Array,
            //数组和对象必须使用函数进行返回
            default : function(){
                return []
            }
        }
    }
  }
</script>

六、自定义事件组件交互

  自定义事件可以在组件中反向传递数据，prop可以将数据从父组件传递到子组件中，那么我们可以利用自定义事件实现$emit，示例如下：
  这是helloWord组件代码

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

    <!-- 自定义事件组件交互-->
    <button @click="sendClickHandle">点击传递数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },
  props :{
    title :{
      type : String,
      default : ""
    }
  },
  methods:{
    sendClickHandle(){
      // 参数1：字符串，命名建议具有意义
      this.$emit("onEvent",this.message)
    }
  }
}
</script>

<style>

</style>

  这是App组件代码

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 第三步：显示组件 -->
  <MyComponentsVue :title="title"/>
  <!-- 接收自定义事件传递的数据-->
  <HelloWorld msg="Welcome to Your Vue.js App" @onEvent="getDataHandle"/>
  <p>{{ message }}</p>
</template>

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

export default {
  name: 'App',
  data(){
    return{
      title : "清风不渡",
      message : ""

    }
  },
  components: {
    HelloWorld,
    // 第二步：挂载组件
    MyComponentsVue
  },
  methods :{
    getDataHandle(data){
       this.message = data;
    }
  }
}
</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>

  结果如下，点击按钮将helloWorld中的数据传递给App组件，并予以展示：

在这里插入图片描述
在这里插入图片描述

七、组件生命周期

  每个组件在被创建的时候都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更行DOM等。同时在这个过程中也会运行一下叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，共有以下八个周期。
在这里插入图片描述

  可以区分为以下四个状态：

  1. 创建时：beforeCreate、created
  2. 渲染时：beforeMount、mounted
  3. 更新时：beforeUpdate、updated
  4. 卸载时：beforeUnmount、unmounted

  示例如下：

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

    <!-- 自定义事件组件交互-->
    <button @click="sendClickHandle">点击传递数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },
  props :{
    title :{
      type : String,
      default : ""
    }
  },
  methods:{
    sendClickHandle(){
      // 参数1：字符串，命名建议具有意义
      this.$emit("onEvent",this.message)
    }
  },
  beforeCreate(){
    console.log("beforeCreate：组件创建之前");
  },
  created(){
    console.log("created：组件创建之后");
  },
  beforeMount(){
    console.log("beforeMount：组件渲染之前");
  },
  mounted(){
    console.log("mounted：组件渲染之后");
  },
  beforeUpdate(){
    console.log("beforeUpdate：组件更新之前");
  },
  updated(){
    console.log("updated：组件更新之后");
  },
  beforeUnmount(){
    console.log("beforeUnmount：组件卸载之前");
  },
  unmounted(){
    console.log("unmounted：组件卸载之后");
  }
}
</script>

<style>

</style>

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

例如：我们可以把网络请求放在组件渲染完成之后，再进行数据请求，把请求到的数据显示在页面上，或者在组件卸载之前将消耗性能的东西进行一个处理

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Vue研习录

vue

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

  • 2023华为OD机试真题【最多等和不相交连续子序列】

    题目描述 给定一个数组 我们称其中连续的元素为连续子序列 称这些元素的和为连续子序列的和 数组中可能存在几组连续子序列 组内的连续子序列互不相交且有相同的和 求一组连续子序列 组内子序列的数目最多 输出这个数目 输入描述 第一行输入为数组长

随机推荐

  • CUDA C编程向量加法-第3章 CUDA 简介

    第3章 CUDA 简介 大规模并行处理器编程实战 学习 其他章节关注专栏 CUDA C CUDA C 编程友情链接 第三章 CUDA 简介 CUDA C编程向量加法 第四章 CUDA数据并行执行模型 第五章 CUDA 存储器 第六章 CUD

  • 网站开发流程（开发环境/测试环境---生产环境）

    最近接手了两个独立站点的开发 开发完成交付的时候 中间遇到了很多问题 也让我有了很多思考 1 由于是利用wordpress建站 所以是先把站点程序部署在了服务器上 那么我的当前环境既是开发环境 又是生产环境 风险很大 2 公司开发 基本都会

  • 有源带阻和无源带阻的区别_浅析无源滤波和有源滤波组成的滤波电路以及运放反馈...

    小编前几篇和大家一起初步的浅析了无源滤波和有源滤波组成的滤波电路以及运放反馈的分类 先和大家一起回顾一下 有源滤波分为 低通滤波 积分电路 高通滤波 微分电路 带通滤波 后期再和大家分享 带阻滤波 后期再和大家分享 运放电路反馈分为 电流反

  • python算法：求a+aa+aaa.....的和

    题目 给定两个均不超过9的正整数a和n 要求编写函数fn a n 求a aa aaa aa aa n个a 之和 fn须返回的是数列和 其中 a 和 n 都是用户传入的参数 a 的值在 1 9 范围 n 是 1 9 区间内的个位数 函数须返回

  • 划片机实现装片、对准、切割、清洗到卸片的自动化操作

    划片机是一种用于切割和分离材料的设备 通常用于光学和医疗 IC QFN DFN 半导体集成电路 GPP LED氮化镓等芯片分立器件 LED封装 光通讯器件 声表器件 MEMS等行业 划片机可以实现从装片 对准 切割 清洗到卸片的自动化操作

  • 面向对象设计原则——迪米特法则

    一 背景 软件编程的总的原则 低耦合 高内聚 无论是面向过程编程还是面向对象编程 只有使各个模块之间的耦合尽量的低 才能提高代码的复用率 低耦合的优点不言而喻 但是怎么样编程才能做到低耦合呢 那正是迪米特法则要去完成的 二 迪米特法则 迪米

  • 语音识别开源框架

    语音识别开源框架 文章目录 语音识别开源框架 Whisper 特征 Github地址 开源文档介绍 论文参考 ASRT 特征 环境 Github地址 开源文档介绍 DeepSpeech 特征 环境 Github地址 文档介绍 论文参考 De

  • 使用Flask渲染静态网页（模板）

    假设我们有了一个已经写好的网页 我们希望把这个网页展示出来 我们需要怎么做呢 在Flask中我们把这一工作叫做渲染模板 其中我们准备好的网页叫做模板 渲染工作交给一个叫做jinja2的模板引擎就好了 具体使用方法是调用函数render te

  • API服务网关实现之APISIX安装和部署

    一 APISIX相关介绍 1 安全网关 安全网关设置的目的是防止Internet或外网不安全因素蔓延到自己企业或组织的内部网 安全网关在应用层和网络层上面都有防火墙的身影 其范围从协议级过滤到十分复杂的应用级过滤等 推荐了解传智播客linu

  • 九、SQL-labs的第24关——二次注入（Post）

    二次注入首先的一点就要在HTTP请求中提交恶意代码 将这个恶意代码存储在数据库中 以便后面使用 在第24关 我们是通过注册新账号这种方式 将恶意代码存储到数据库中 假设我们的攻击目标是Dummy 1 将恶意代码存储到数据库中 点击注册 输入

  • Hive-Hive排序

    1 DQL 排序问题 1 1 order by 默认是升序asc 可指定降序desc order by是全局排序 只能有一个reduce作业来完成 多个reduce 如何保证全局顺序 hive mapred mode改为strict 则使用

  • 常用的工具

    进程 1 IDA 交互式反汇编器专业版 Interactive Disassembler Professional 简称为IDA IDA Pro是一款支持交互 可编程的 扩展插件 支持多种处理器的逆向工程利器 我一般用来看看库依赖 2 Pr

  • CMake学习之include

    文章目录 一 cmake incldue 二 示例 一 cmake incldue 从给定的文件中读取CMake的列表文件 include file OPTIONAL RESULT VARIABLE VAR 从给定的文件中读取CMake的清

  • 腾讯公司面试题【1】

    腾讯面试题 给你10分钟时间 根据上排给出十个数 在其下排填出对应的十个数 要求下排每个数都是先前上排那十个数在下排出现的次数 上排的十个数如下 0 1 2 3 4 5 6 7 8 9 举一个例子 数值 0 1 2 3 4 5 6 7 8

  • 数据库并发操作和封锁技术

    数据库在使用时许多事务可能同时对同一数据进行并发操作此时会破坏数据库的完整性 并发 指的是在一个CPU上利用分时方法实行多个事务同时做 一般数据库的并发操作会带来三个问题 1 丢失更新 2 读脏数据 3 不可重复读 个人的解释 1 丢失更新

  • 基于Pytorch语义分割模型的C++部署教程，CPU版本

    基于Pytorch语义分割模型的C 部署教程 CPU版本 1 pth权重文件转pt权重文件 两种pth保存的方式 模型转换 2 C libtorch的下载与环境配置 libtorch下载 Libtorch C 环境的配置 3 C 下pt文件

  • 数学甜点004

    数学是一门及其高深又变幻莫测的学科 且其根本就是问题的解决 因此是不可能也没有必要去寻找一种能够解决所有问题的通解的 坦白说 研究数学的最大乐趣就是在于发现从来没有人走过的新道路 即一种不同于常规的具有跳跃性 构造性的解法 换句话说 无论是

  • 解决jupyter “Running as root is not recommended.xxx”错误 && jupyter配置方法

    文章目录 1 问题解决 1 1 产生jupyter配置文件 1 2 修改配置文件 2 jupyter配置 3 jupyter修改密码 1 问题解决 运行jupyter notebook jupyter lab出现 Running as ro

  • Java8 操作集合汇总

    文章目录 优雅的将一个对象的集合转化成另一个对象的集合 交集 list1 list2 差集 并集 去重并集 从List中过滤出一个元素 Map集合转 List Collectors toList Collectors toMap List集

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

    Vue研习录 07 组件基础知识详解及示例分析 版权声明 一 什么是组件 二 定义组件 三 加载组件 四 scoped属性 五 props组件交互 六 自定义事件组件交互 七 组件生命周期 版权声明 本文原创作者 清风不渡 博客地址 htt

热门标签