vue组件化的理解_vue引入组件的方式有几种

vue组件化的理解_vue引入组件的方式有几种前言有时候有一组html结构的代码,并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的。那么这时候我们就可以

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

有时候有一组html结构的代码,并且这个上面可能还绑定了事件。然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的。那么这时候我们就可以把这些代码封装成一个组件,以后在使用的时候就跟使用普通的html元素一样,拿过来用就可以了。
 

基本使用

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
<script>
  // 定义一个名为 button-counter 的新组件
  Vue.component('ButtonCounter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button @click="count++">点击了{{ count }}次</button>'
  })
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

以上我们创建了一个叫做button-counter的组件,这个组件实现了能够记录点击了多少次按钮的功能。后期如果我们想要使用,就直接通过button-counter使用就可以了。然后因为组件是可复用的Vue实例,所以它们与new Vue接收相同的选项,例如datacomputedwatchmethods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。另外需要注意的是:组件中的data必须为一个函数!

我们来看下实现的效果
vue组件化的理解_vue引入组件的方式有几种
我们上面使用了3次button-counter组件,所以页面会显示3个,并且每个组件都会各自独立维护它的 count,因为你每用一次组件,就会有一个它的新实例被创建。每个实例可以维护一份被返回对象的独立的拷贝,这就是我们data中使用函数的原因

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165395.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 《廖雪峰python3教程》| 书评 + 学习笔记干货

    《廖雪峰python3教程》| 书评 + 学习笔记干货如果你正在考虑自己适不适合读《廖雪峰python3教程》,不妨看看我的评价~我把知识盲点整理成了一份清单,你可以自测,然后参考我的学习笔记哦~

    2022年10月31日
  • 文件句柄资源

    文件句柄资源1、文件句柄限制可通过执行以下命令,查看单个进程最多可使用的文件句柄数量:1/#ulimit-n21024可通过执行以下命令,查看系统环境最多可使用的文件句柄数量:1/#cat

  • js判断字符串数组是否包含某个字符串_java数组排序函数

    js判断字符串数组是否包含某个字符串_java数组排序函数在C#语法中判断集合是否包含某个元素可以使用Contains方法,但是类似的问题在javascript中要怎么处理呢,js中没有Contains方法。我们可以利用js的原型扩展来封装一个我们自己的Contains方法。js代码:        $(function(){           Array.prototype.contains=functio

  • tf卡锁定怎么解锁_tf卡写保护解除办法

    tf卡锁定怎么解锁_tf卡写保护解除办法最近这段时间,开始使用TFS2010进行项目的源码管理,在使用过程中,发现了不些问题,由于开发人员的操作失误,经常导致了源码中的文件被锁定,而在开发人员的PC机上又不能把锁定的文件签入到TFS中,刚开始遇到这个问题时,想通过管理员帐号来“取消锁定”,但在“源代码管理器”中,管理员帐号也没有权限操作“取消锁定”。遇到这种文件被锁定的事,是相当的郁闷。郁闷归郁闷,问题还是得要解决,…

  • php熔断机制,如何保证核心链路稳定性的流控和熔断机制?

    php熔断机制,如何保证核心链路稳定性的流控和熔断机制?仅从设计优化、服务拆分、自动扩容等方面进行优化,有时候并不能完全解决问题。比如,有时流量增长过快,扩容流程还来不及完成,服务器可能就已经抗不住了既然突发流量我们没法预测,业务上也不可能不依赖任何外部服务和资源,那么有什么办法能尽量避免,或者降低出现这些问题时对核心业务的影响呢?流量控制01.流控常用的算法目前业内常用的流控方法有两种:漏桶算法和令牌桶算法漏桶算法“漏桶算法”的主要目的是控制数据注…

    2022年10月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号