码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Vue组件定义复用全局组件局部组件


    组件复用

    Vue中的全局组件与局部组件与组件复用

    效果

    hello world 和 1 都为局部组件被根组件引用

    在这里插入图片描述

    代码

    注意组件的定义,父子组件的引用,全局组件与局部组件的命名方式

    DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>lesson 14title>
      <script src="https://unpkg.com/vue@next">script>
    head>
    <body>
      <div id="root">div>
    body>
    <script>
      // 组件的定义
      // 组件具备复用性
      // 全局组件,只要定义了,处处可以使用,性能不高,但是使用起来简单,名字建议 小写字母单词,中间用横线间隔
      // 局部组件,定义了,要注册之后才能使用,性能比较高,使用起来有些麻烦,建议大些字母开头,驼峰命名
      // 局部组件使用时,要做一个名字和组件间的映射对象,你不写映射,Vue 底层也会自动尝试帮你做映射
    
      const Counter = {
        data() {
          return {
            count: 1
          }
        },
        template: `
    {{count}}
    `
    } const HelloWorld = { template: `
    hello world
    `
    } const app = Vue.createApp({ components: { // counter: Counter, // 'hello-world': HelloWorld, Counter, HelloWorld, }, template: `
    `
    }); // app.component('counter-parent', { // template: `` // }) // app.component('counter', { // data() { // return { // count: 1 // } // }, // template: `
    {{count}}
    `
    // }) const vm = app.mount('#root');
    script> html>
    • 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
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
  • 相关阅读:
    基于PSO的UAV三维路径规划(Matlab代码实现)
    【计算机毕设选题推荐】超市管理系统SpringBoot+SSM+Vue
    【Python】【OpenCV】OCR识别(二)——透视变换
    【11.25】【VP】 45 届 济南站
    哈希表题目:两数之和
    完成比写得好更重要,先完成初稿再说
    高性能实体类转换工具MapStruct 使用教程
    Codeforces Round #808 (Div. 2) C【二分】【贪心】【反向贪心】
    Apple:万亿收入指日可待
    【深度学习】特征融合的重要方法 | 张量的拼接 | torch.cat()函数 | torch.add(函数
  • 原文地址:https://blog.csdn.net/weixin_41405524/article/details/125881937
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号