Vue系列专栏- - - VUE组件

简介: ​作者是名退役复学在校大学生,对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究,欢迎关注,和我一起交流。一、为什么需要组件?一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块vue组件化应用:任何应用都是一颗组件树1.创建组件2.创建组件语法糖写法省去Vue.extend()的调用,可以直接使用一个对象代替Vue.component("myCpn", {    template: `            <div>            <h1>广告</h1>

博主传送门:   叶秋学长

博主简介:  全栈领域新星创作者,新星计划第三季人工智能赛道TOP2;阿里云技术博主;退役复学在校大学生,全栈JAVA领域创作者,目光所至,皆为华夏

系列专栏跳转:

 Vue讲解

Spring系列

Spring Boot 系列

云原生系列(付费专栏)

今天叶秋学长带领大家继续学习vue讲解系列专栏中的Vue组件~~

一、为什么需要组件?

一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块

vue组件化

应用:任何应用都是一颗组件树

1.创建组件

    • const cpn = Vue.extend({}):创建一个组件构造器
    • template:表示我们组件的模板(其实就是你要显示的html)
    • Vue.component('组件名称',构造器cpn)
    • 使用:<组件名称></组件名称>

    image.gif编辑

    2.创建组件语法糖写法

    省去Vue.extend()的调用,可以直接使用一个对象代替

    Vue.component("myCpn", {

       template: `

               <div>

               <h1>广告</h1>

               <h2>广告内容</h2>

               </div>

               `,

    });

    3.全局组件和局部组件

      • 全局组件
        全局注册,实现所有vue都可以使用
      • 局部组件
        挂载在某一个vue实例下,其他组件不可以用

      4.父组件和子组件

      简单理解,在谁的div里面去使用的组件,就是这个对应的子组件

      <div id="app">

         <father-cpn></father-cpn>

      </div>

      <script>

         Vue.component("fatherCpn", {

         template: `

             <div>

                <h1>父组件</h1>

                <son></son>

             </div>

                 `,

         // 子组件(局部组件)

         components:{

             son:{

                 template:`  <h1>子组件</h1>`

             }

         }

      });

      new Vue({

         el: "#app",

         data: {},

      });

      5.模板抽离写法

        • 方法一

        <!-- 方法一 -->

        <script type="text-template" id="cpn1">

           <div>

           <h1>模板抽离方法一</h1>

           </div>

        </script>

        • 方法二(推荐)

        <!-- 方法二 -->

        <template id="cpn2">

        <div>

           <div class="box">

               <h1>模板抽离方法二</h1>

           </div>

        </div>

        </template>

        6.组件数据

        组件是一个单独功能模块分装

        这个模块拥有自己html,data,methons....

        data是一个函数

        data(){

           retrun {

               

           }

        }

        7.父子组件通信

        (1)父组件向子组件通信

        子组件使用props接收父组件传递的参数

        props:

          • 数组:数组值名称应该是对应的变量名
          • 对象(推荐):可以设置传入参数的类型,也可以设置默认

          (2)子组件向父组件通信

          写一个自定义方法

          this.$emit("方法-名称",传递参数)

          8.父子组件的访问方式

          9.插槽

          10.具名插槽

          11.作用域插槽

          相关文章
          |
          22天前
          |
          JavaScript
          vue使用iconfont图标
          vue使用iconfont图标
          119 1
          |
          1天前
          |
          JavaScript 安全 API
          iframe嵌入页面实现免登录思路(以vue为例)
          通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
          22 8
          |
          2月前
          |
          缓存 JavaScript UED
          Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
          在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
          165 64
          |
          2天前
          |
          存储 设计模式 JavaScript
          Vue 组件化开发:构建高质量应用的核心
          本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
          18 1
          |
          1月前
          |
          JavaScript 关系型数据库 MySQL
          基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
          基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
          |
          2月前
          |
          JavaScript API 开发者
          Vue是如何进行组件化的
          Vue是如何进行组件化的
          |
          2月前
          |
          JavaScript 前端开发 开发者
          Vue是如何进行组件化的
          Vue是如何进行组件化的
          |
          2月前
          |
          存储 JavaScript 前端开发
          介绍一下Vue的核心功能
          介绍一下Vue的核心功能
          |
          2月前
          |
          前端开发 JavaScript 测试技术
          Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
          Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
          61 8
          |
          2月前
          |
          JavaScript
          在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
          需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。