立即前往

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
查看全部活动
热门活动
  • 智算采购季 热销S6云服务器2核4G限时88元/年起,部分主机可加赠对象存储组合包!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 一键部署Llama3大模型学习机 0代码一键部署,预装最新主流大模型Llama3与StableDiffusion
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 产品能力
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
    • 关系数据库SQL Server版
    • 企业主机安全
    • 云防火墙
    • CDN加速
    • 物理机
    • GPU云主机
    • 天翼云电脑(政企版)
    • 天翼云电脑(公众版)
    • 云主机备份
    • 弹性云主机
      搜索发现
      关系数据库SQL Server版企业主机安全云防火墙CDN加速物理机GPU云主机天翼云电脑(政企版)天翼云电脑(公众版)云主机备份弹性云主机
    • 文档
    • 控制中心
    • 备案
    • 管理中心
    • 登录
    • 免费注册

    vue组件

    首页 知识中心 其他 文章详情页

    vue组件

    2023-02-08 10:33:56 阅读次数:161

    vue,javascript


    组件

    • 组件 (Component) 是 Vue.js 最强大的功能之一
    • 组件可以扩展 HTML 元素,封装可重用的代

    组件注册

    全局注册

    • Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象
    • 全局组件注册后,任何vue实例都可以用
    组件基础用
    <div id="example">
      <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  
      <my-component></my-component>
    </div>
    <script>
        //   注册组件 
        // 1、 my-component 就是组件中自定义的标签名
      Vue.component('my-component', {
          template: '<div>A custom component!</div>'
        })
    
        // 创建根实例
        new Vue({
          el: '#example'
        })
    
    </script>
    组件注意事项
    • 组件参数的data值必须是函数同时这个函数要求返回一个对象
    • 组件模板必须是单个根元素
    • 组件模板的内容可以是模板字符串
    <div id="app">
         <!-- 
        4、  组件可以重复使用多次 
            因为data中返回的是一个对象所以每个组件中的数据是私有的
          即每个实例可以维护一份被返回对象的独立的拷贝   
      --> 
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
          <!-- 8、必须使用短横线的方式使用组件 -->
         <hello-world></hello-world>
      </div>
    
    <script type="text/javascript">
      //5  如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,
        // 7、但是在普通的标签模板中,必须使用短横线的方式使用组件
         Vue.component('HelloWorld', {
          data: function(){
            return {
              msg: 'HelloWorld'
            }
          },
          template: '<div>{{msg}}</div>'
        });
        
        
        
        Vue.component('button-counter', {
          // 1、组件参数的data值必须是函数 
          // 同时这个函数要求返回一个对象  
          data: function(){
            return {
              count: 0
            }
          },
          //  2、组件模板必须是单个根元素
          //  3、组件模板的内容可以是模板字符串  
          template: `
            <div>
              <button @click="handle">点击了{{count}}次</button>
              <button>测试123</button>
          #  6 在字符串模板中可以使用驼峰的方式使用组件 
           <HelloWorld></HelloWorld>
            </div>
          `,
          methods: {
            handle: function(){
              this.count += 2;
            }
          }
        })
        var vm = new Vue({
          el: '#app',
          data: {
            
          }
        });
      </script>

    局部注册

    • 只能在当前注册它的vue实例中使用
    <div id="app">
          <my-component></my-component>
      </div>
    
    
    <script>
        // 定义组件的模板
        var Child = {
          template: '<div>A custom component!</div>'
        }
        new Vue({
          //局部注册组件  
          components: {
            // <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
            'my-component': Child
          }
        })
     </script>

    Vue 调试工具

    Vue组件之间传值

    父组件向子组件传值

    • 父组件发送的形式是以属性的形式绑定值到子组件身上。
    • 然后子组件用属性props接收
    • 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制
    <div id="app">
        <div>{{pmsg}}</div>
         <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
         <!-- 给子组件传入一个静态的值 -->
        <menu-item title='来自父组件的值'></menu-item>
        <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
          传的值可以是数字、对象、数组等等
      -->
        <menu-item :title='ptitle' content='hello'></menu-item>
      </div>
    
      <script type="text/javascript">
        Vue.component('menu-item', {
          // 3、 子组件用属性props接收父组件传递过来的数据  
          props: ['title', 'content'],
          data: function() {
            return {
              msg: '子组件本身的数据'
            }
          },
          template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
        });
        var vm = new Vue({
          el: '#app',
          data: {
            pmsg: '父组件中内容',
            ptitle: '动态绑定属性'
          }
        });
      </script>

    子组件向父组件传值

    • 子组件用​​$emit()​​触发事件
    • ​​$emit()​​ 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
    • 父组件用v-on 监听子组件的事件
    <div id="app">
        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
         <!-- 2 父组件用v-on 监听子组件的事件
        这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数 
      -->  
        <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          子组件向父组件传值-携带参数
        */
        
        Vue.component('menu-item', {
          props: ['parr'],
          template: `
            <div>
              <ul>
                <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
              </ul>
          ###  1、子组件用$emit()触发事件
          ### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
              <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
              <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            pmsg: '父组件中内容',
            parr: ['apple','orange','banana'],
            fontSize: 10
          },
          methods: {
            handle: function(val){
              // 扩大字体大小
              this.fontSize += val;
            }
          }
        });
      </script>

    兄弟之间的传递

    • 兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据
    • 提供事件中心 var hub = new Vue()
    • 传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)
    • 接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
    • 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
    <div id="app">
        <div>父组件</div>
        <div>
          <button @click='handle'>销毁事件</button>
        </div>
        <test-tom></test-tom>
        <test-jerry></test-jerry>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          兄弟组件之间数据传递
        */
        //1、 提供事件中心
        var hub = new Vue();
    
        Vue.component('test-tom', {
          data: function(){
            return {
              num: 0
            }
          },
          template: `
            <div>
              <div>TOM:{{num}}</div>
              <div>
                <button @click='handle'>点击</button>
              </div>
            </div>
          `,
          methods: {
            handle: function(){
              //2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)   触发兄弟组件的事件
              hub.$emit('jerry-event', 2);
            }
          },
          mounted: function() {
           // 3、接收数据方,通过mounted(){} 钩子中  触发hub.$on(方法名
            hub.$on('tom-event', (val) => {
              this.num += val;
            });
          }
        });
        Vue.component('test-jerry', {
          data: function(){
            return {
              num: 0
            }
          },
          template: `
            <div>
              <div>JERRY:{{num}}</div>
              <div>
                <button @click='handle'>点击</button>
              </div>
            </div>
          `,
          methods: {
            handle: function(){
              //2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)   触发兄弟组件的事件
              hub.$emit('tom-event', 1);
            }
          },
          mounted: function() {
            // 3、接收数据方,通过mounted(){} 钩子中  触发hub.$on()方法名
            hub.$on('jerry-event', (val) => {
              this.num += val;
            });
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
            
          },
          methods: {
            handle: function(){
              //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
              hub.$off('tom-event');
              hub.$off('jerry-event');
            }
          }
        });
      </script>

    组件插槽

    • 组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力

    匿名插槽

    <div id="app">
        <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
        <alert-box>有bug发生</alert-box>
        <alert-box>有一个警告</alert-box>
        <alert-box></alert-box>
      </div>
    
      <script type="text/javascript">
        /*
          组件插槽:父组件向子组件传递内容
        */
        Vue.component('alert-box', {
          template: `
            <div>
              <strong>ERROR:</strong>
        # 当组件渲染的时候,这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
        # 插槽内可以包含任何模板代码,包括 HTML
              <slot>默认内容</slot>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            
          }
        });
      </script>
    </body>
    </html>

    具名插槽

    • 具有名字的插槽
    • 使用 中的 “name” 属性绑定元素
    <div id="app">
        <base-layout>
           <!-- 2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上
            如果没有匹配到 则放到匿名的插槽中   --> 
          <p slot='header'>标题信息</p>
          <p>主要内容1</p>
          <p>主要内容2</p>
          <p slot='footer'>底部信息信息</p>
        </base-layout>
    
        <base-layout>
          <!-- 注意点:template临时的包裹标签最终不会渲染到页面上     -->  
          <template slot='header'>
            <p>标题信息1</p>
            <p>标题信息2</p>
          </template>
          <p>主要内容1</p>
          <p>主要内容2</p>
          <template slot='footer'>
            <p>底部信息信息1</p>
            <p>底部信息信息2</p>
          </template>
        </base-layout>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          具名插槽
        */
        Vue.component('base-layout', {
          template: `
            <div>
              <header>
          ### 1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字
                <slot name='header'></slot>
              </header>
              <main>
                <slot></slot>
              </main>
              <footer>
          ###  注意点: 
          ###  具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序
                <slot name='footer'></slot>
              </footer>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            
          }
        });
      </script>
    </body>
    </html>


    版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_15943685/6026640,作者:步_步_为营,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

    上一篇:枚举类型enum

    下一篇:constexpr变量、constexp函数和常量表达式

    相关文章

    2025-04-23 08:18:27

    nginx结合前后端分离项目springboot+vue的配置

    项目采用的是前后端分离springboot+vue,通过nginx监听,转发到对应的前端页面或者后台接口调用

    2025-04-23 08:18:27
    nginx , springboot , vue , 分离 , 配置
    2025-04-22 09:40:08

    【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

    【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

    2025-04-22 09:40:08
    java , javascript , org
    2025-04-14 08:45:36

    一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

    一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

    2025-04-14 08:45:36
    html , javascript
    2025-04-07 10:20:39

    从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

    从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

    2025-04-07 10:20:39
    javascript
    2025-04-01 10:29:12

    Vue项目学习(1)

    Vue项目学习(1)

    2025-04-01 10:29:12
    cmd , gt , vue , 端口号 , 项目
    2025-04-01 09:21:49

    数据结构14-栈常见操作3

    数据结构14-栈常见操作3

    2025-04-01 09:21:49
    html , javascript , Stack , 前端
    2025-03-31 08:57:48

    vue-area-linkage 省市区Vue组件

    vue-area-linkage 省市区Vue组件

    2025-03-31 08:57:48
    data , vue , 组件
    2025-03-31 08:57:48

    vue-image-crop-upload 一个强大的图片剪切组件

    vue-image-crop-upload 一个强大的图片剪切组件

    2025-03-31 08:57:48
    image , upload , vue , 组件
    2025-03-31 08:57:38

    webpack2.4.* 常用的一些loader

    webpack2.4.* 常用的一些loader

    2025-03-31 08:57:38
    config , loader , vue , webpack
    2025-03-31 08:50:08

    vue v-show && v-model的简单使用

    vue v-show && v-model的简单使用

    2025-03-31 08:50:08
    amp , model , vue , 场景 , 实例
    查看更多
    推荐标签

    作者介绍

    天翼云小翼
    天翼云用户

    文章

    32777

    阅读量

    4816513

    查看更多

    最新文章

    Vue项目学习(1)

    2025-04-01 10:29:12

    vue-image-crop-upload 一个强大的图片剪切组件

    2025-03-31 08:57:48

    vue-area-linkage 省市区Vue组件

    2025-03-31 08:57:48

    webpack2.4.* 常用的一些loader

    2025-03-31 08:57:38

    vue v-show && v-model的简单使用

    2025-03-31 08:50:08

    解决vue3引入ref后页面报错:The requested module ‘/xx/vue.js‘ does not provide an export named ‘default‘

    2025-03-06 09:15:52

    查看更多

    热门文章

    Jsp Ajax之模拟用户注册

    2022-11-17 12:37:24

    vue如何解决axios请求前端跨域问题

    2023-07-26 08:08:42

    VUE前端工程化-2

    2023-02-07 10:34:04

    使用axios完成JS文件流式下载文件

    2023-07-26 07:51:41

    js: json的序列化和反序列化

    2023-02-20 10:30:04

    react18-学习笔记14-枚举(Enum)

    2023-03-16 07:13:43

    查看更多

    热门标签

    linux java python javascript 数组 前端 docker Linux vue 函数 shell git 容器 spring 节点
    查看更多

    相关产品

    弹性云主机

    随时自助获取、弹性伸缩的云服务器资源

    天翼云电脑(公众版)

    便捷、安全、高效的云电脑服务

    对象存储

    高品质、低成本的云上存储服务

    云硬盘

    为云上计算资源提供持久性块存储

    查看更多

    随机文章

    Vue3--使用脚手架创建一个vue应用,实现todolist

    好客租房49-组件的props(特点)

    Vue+Element UI

    vue之v-for基本使用

    学习javascript基础知识系列第二节 - this用法

    重读vue电商网站23之element-ui 如何按需导入

    • 7*24小时售后
    • 无忧退款
    • 免费备案
    • 专家服务
    售前咨询热线
    400-810-9889转1
    关注天翼云
    • 权益商城
    • 天翼云APP
    • 天翼云微信公众号
    服务与支持
    • 备案中心
    • 售前咨询
    • 智能客服
    • 自助服务
    • 工单管理
    • 客户公告
    • 涉诈举报
    账户管理
    • 管理中心
    • 订单管理
    • 余额管理
    • 发票管理
    • 充值汇款
    • 续费管理
    快速入口
    • 权益商城
    • 文档中心
    • 最新活动
    • 免费试用
    • 信任中心
    • 天翼云学堂
    云网生态
    • 甄选商城
    • 渠道合作
    • 云市场合作
    了解天翼云
    • 关于天翼云
    • 天翼云APP
    • 服务案例
    • 新闻资讯
    • 联系我们
    热门产品
    • 云电脑
    • 弹性云主机
    • 云电脑政企版
    • 天翼云手机
    • 云数据库
    • 对象存储
    • 云硬盘
    • Web应用防火墙
    • 服务器安全卫士
    • CDN加速
    热门推荐
    • 云服务备份
    • 边缘安全加速平台
    • 全站加速
    • 安全加速
    • 云服务器
    • 云主机
    • 智能边缘云
    • 应用编排服务
    • 微服务引擎
    • 共享流量包
    更多推荐
    • web应用防火墙
    • 密钥管理
    • 等保咨询
    • 安全专区
    • 应用运维管理
    • 云日志服务
    • 文档数据库服务
    • 云搜索服务
    • 数据湖探索
    • 数据仓库服务
    友情链接
    • 中国电信集团
    • 189邮箱
    • 天翼企业云盘
    • 天翼云盘
    ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
    公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
    • 用户协议
    • 隐私政策
    • 个人信息保护
    • 法律声明
    备案 京公网安备11010802043424号 京ICP备 2021034386号