AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue组件的使用与基础知识你真的完全明白吗？

2024-08-21 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【8月更文挑战第16天】vue组件的使用与基础知识你真的完全明白吗？

非单文件组件

非单文件组件就是一个文件里面有n个组件 n>1

Vue中使用组件的三大步骤：

一、定义组件(创建组件)

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：

  • el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  • data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

//第一步：创建school组件
        const school = Vue.extend({
   
   
            template:`
                <div class="demo">
                    <h2>学校名称：{
    
    {schoolName}}</h2>
                    <h2>学校地址：{
    
    {address}}</h2>
                    <button @click="showName">点我提示学校名</button>    
                </div>
            `,
// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
            data(){
   
   
                return {
   
   
                    schoolName:'gcshi',
                    address:'陕西西安'
                }
            },
            methods: {
   
   
                showName(){
   
   
                    alert(this.schoolName)
                }
            },
        })

二、注册组件

局部注册

靠new Vue的时候传入components选项

new Vue({
   
   
        el:'#root',
        data:{
   
   
            msg:'你好啊！'
        },
        //第二步：注册组件（局部注册）
        components:{
   
   
            school,
        }
})

全局注册

靠Vue.component('组件名',组件)

//第一步：创建hello组件
        const hello = Vue.extend({
   
   
            template:`
                <div>    
                    <h2>你好啊！{
    
    {name}}</h2>
                </div>
            `,
            data(){
   
   
                return {
   
   
                    name:'Tom'
                }
            }
        })

//第二步：全局注册组件
  Vue.component('hello',hello)

三、使用组件(写组件标签)

vue.js为源码文件，以下文件直接进行了本地引入
链接：https://pan.baidu.com/s/1D8p8Ywxfo5PCIw_aF8xeNw
提取码：lhgv

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>基本使用</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
      <!-- 第三步：编写组件标签 -->
            <hello></hello>
            <hr>
            <h1>{
   
   {
   
   msg}}</h1>
            <hr>
            <!-- 第三步：编写组件标签 -->
            <school></school>
            <hr>
            <!-- 第三步：编写组件标签 -->
            <student></student>
        </div>

        <div id="root2">
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //第一步：创建school组件
        const school = Vue.extend({
   
   
            template:`
                <div class="demo">
                    <h2>学校名称：{
    
    {schoolName}}</h2>
                    <h2>学校地址：{
    
    {address}}</h2>
                    <button @click="showName">点我提示学校名</button>    
                </div>
            `,
            data(){
   
   
                return {
   
   
                    schoolName:'尚硅谷',
                    address:'北京昌平'
                }
            },
            methods: {
   
   
                showName(){
   
   
                    alert(this.schoolName)
                }
            },
        })

        //第一步：创建student组件
        const student = Vue.extend({
   
   
            template:`
                <div>
                    <h2>学生姓名：{
    
    {studentName}}</h2>
                    <h2>学生年龄：{
    
    {age}}</h2>
                </div>
            `,
            data(){
   
   
                return {
   
   
                    studentName:'张三',
                    age:18
                }
            }
        })

        //第一步：创建hello组件
        const hello = Vue.extend({
   
   
            template:`
                <div>    
                    <h2>你好啊！{
    
    {name}}</h2>
                </div>
            `,
            data(){
   
   
                return {
   
   
                    name:'Tom'
                }
            }
        })

        //第二步：全局注册组件
        Vue.component('hello',hello)

        //创建vm
        new Vue({
   
   
            el:'#root',
            data:{
   
   
                msg:'你好啊！'
            },
            //第二步：注册组件（局部注册）
            components:{
   
   
                school,
                student
            }
        })

        new Vue({
   
   
            el:'#root2',
        })
    </script>
</html>

组件使用注意点

关于组件名:

一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签:

第一种写法：<school></school>
第二种写法：<school/> （需要使用脚手架，不用使用脚手架时，<school/>会导致后续组件不能渲染。）

一个简写方式

const school = Vue.extend(options) 可简写为：const school = options

组件的嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>组件的嵌套</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root"></div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //定义student组件
        const student = Vue.extend({
   
   
            name:'student',
            template:`
                <div>
                    <h2>学生姓名：{
    
    {name}}</h2>    
                    <h2>学生年龄：{
    
    {age}}</h2>    
                </div>
            `,
            data(){
   
   
                return {
   
   
                    name:'尚硅谷',
                    age:18
                }
            }
        })
        //定义school组件
        const school = Vue.extend({
   
   
            name:'school',
            template:`
                <div>
                    <h2>学校名称：{
    
    {name}}</h2>    
                    <h2>学校地址：{
    
    {address}}</h2>    
                    <student></student>
                </div>
            `,
            data(){
   
   
                return {
   
   
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            //注册组件（局部）
            components:{
   
   
                student
            }
        })

        //定义hello组件
        const hello = Vue.extend({
   
   
            template:`<h1>{
    
    {msg}}</h1>`,
            data(){
   
   
                return {
   
   
                    msg:'欢迎来到尚硅谷学习！'
                }
            }
        })

        //定义app组件
        const app = Vue.extend({
   
   
            template:`
                <div>    
                    <hello></hello>
                    <school></school>
                </div>
            `,
            components:{
   
   
                school,
                hello
            }
        })

        //创建vm
        new Vue({
   
   
            template:'<app></app>',
            el:'#root',
            //注册组件（局部）
            components:{
   
   app}
        })
    </script>
</html>

VueComponent

  • 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

    //定义school组件
      const school = Vue.extend({
     
     
          name:'school',
          template:`
              <div>
                哈哈哈哈
              </div>
          `,
      })
console.log(school)   
//    ƒ VueComponent (options) {
     
     
//         this._init(options);
//    }

    从打印结果可以看出，shool组件实际是由VueComponent构造函数所实例化出来的对象。
    image.png
    打断点，进入vue.js源码中，可以发现在使用 Vue.extend创建组件时，实际还在内部调用了VueComponent构造函数生成了sub实例化对象，最终将实例化对象return了出来。

  • 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

  • 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

  • 关于this指向：

    1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

    2. new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

      <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>VueComponent</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
      <school></school>
      <hello></hello>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  //定义school组件
  const school = Vue.extend({
       
       
      name:'school',
      template:`
          <h1 @click="showThis">
              点击school组件
          </h1>
      `,
      methods: {
       
       
          showThis(){
       
       
              console.log('school组件',this)
          }
      },
  })

  const test = Vue.extend({
       
       
      template:`<h4>test子组件</h4>`
  })

  //定义hello组件
  const hello = Vue.extend({
       
       
      template:`
          <h2>
              <h4>hello组件</h4>
              <test></test>    
          </h2>
      `,
      components:{
       
       test}
  })

  //创建vm
  const vm = new Vue({
       
       
      el:'#root',
      created(){
       
       
          console.log("Vue根组件",this)
      },
      components:{
       
       school,hello}
  })
</script>
</html>

      image.png
      此外。也可以看出，vue根组件管理者其他所有组件
      image.png

  • VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

一个重要的内置关系

image.png
如图，正常情况下，VueComponent的隐式原型属性proto应该指向Object的原型对象，但是vue做了强制更改，使
VueComponent.prototype.proto === Vue.prototype
image.png
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

vue2中的组件

原生html中组件的使用

不使用Cli脚手架的项目中

全局使用组件（全局注册）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的练习</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <div id="app">
            <my-Button></my-Button>
                 <my-Button></my-Button>
        </div>

        <script type="text/javascript">
        // 定义一个名为 button-counter 的新组件
        Vue.component('MyButton', {
   
   
          data: function () {
   
   
            return {
   
   
              count: 0
            }
          },
          template: '<button v-on:click="count++">我被点击了{
   
   { count }}次</button>'
        })
         const vm = new Vue({
   
   
            el: '#app',
            data: {
   
   }
        })
        </script>
    </body>
</html>

组件名的两种命名方式

连字符：如 "my-Button"，使用
驼峰式：如"MyButton"，或均可。

  • 直接在 DOM (即非字符串的模板) 中使用时只有连字符是有效的，如上述例子使用会报错
  • 组件中的data必须是函数

局部使用组件（局部注册）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的练习</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <div id="app">
            <b>{
   
   {
   
   hello}}</b>
            <my-Button1></my-Button1>
        </div>
        <script type="text/javascript">

        const Bcomponent = {
   
   
          data: function() {
   
   return {
   
   title: "嘿嘿！"}},
          template: '<button>{
   
   { title }}</button>'
        };

        const Pcomponent = {
   
   
          data: function() {
   
   return {
   
   count: 9}},
          components:{
   
   
              MyButton2:Bcomponent,
          },
          template: '<div><button>{
   
   { count }}次数</button><my-Button2></my-Button2></div>'
        };

        const vm = new Vue({
   
   
            el: '#app',
            data: {
   
   hello:"你好"},
            components:{
   
   
                MyButton1:Pcomponent,
            }
        })
        </script>
    </body>
</html>

cli中组件的使用

通过cli创建的项目

全局使用组件（全局注册）

import Thecomponent from './Thecomponent.vue'
Vue.component('MyButton',Thecomponent )
const vm = new Vue({
   
   
    render:h => h(App)
}).$mount("#app")

局部使用组件（局部注册）
某一vue文件中

<template>
  <div class="app">
    <Child></Child>
  </div>
</template>
<script>
    import Child from './components/Child.vue'//静态引入
    export default {
   
   
        name:'App',
        components:{
   
    Child:Child },
    }
</script>

Vue3中组件

原生html中组件的使用

不使用Cli脚手架的项目中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的练习</title>
    </head>
    <body>
        <script src="https://unpkg.com/vue@next"></script>

        <div id="app">
            <button-counter></button-counter>
        </div>
        <script type="text/javascript">

        // 创建一个Vue 应用
        const app = Vue.createApp({
   
   
            data() {
   
   
                return {
   
   
                  counter: 0
                }
              }
        })

        // 定义一个名为 button-counter 的新全局组件
        app.component('button-counter', {
   
   
          data() {
   
   
            return {
   
   
              count: 0
            }
          },
          template: `
            <button @click="count++">
              我被点击了 {
    
    { count }} 次
            </button>`
        })
        app.mount('#app')

        </script>
    </body>
</html>

vite中

全局使用组件（全局注册）

const app = Vue.createApp({
   
   ...})

app.component('my-component-name', {
   
   
  /* ... */
})

app.mount('#app')

局部使用组件（局部注册）

<template>
    <div class="app">
        <Child ></Child>
    </div>
</template>
<script>
    import Child from './components/Child.vue'//静态引入
    export default {
   
   
        name:'App',
        components:{
   
   Child},  //组件写法不变
    }
</script>

方法同vue2，不变

文章标签：
JavaScript
容器
程序员
开发者
石小石Orz
目录
相关文章
程序员彭于晏
|
27天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
28 1
大树营养快线
|
29天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
31 2
光明顶阳顶天
|
24天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
126 64
阿里巴巴叫我来巡山
|
3天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
41 17
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
36 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
26 1
vue学习第三章
mao29955
|
24天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
29 8
光明顶阳顶天
|
24天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
39 2
九月天空
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
24 1
G0518
|
27天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
29 1

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 3
    vue之webpack打包原理和用法详解
  • 4
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 5
    【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
  • 6
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 7
    VUE3中watch与watchEffect —— 全网最详细系列
  • 8
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 9
    中文代码示例之Vuejs入门教程(一)
  • 10
    新建Vue项目
  • 1
    使用Vue.js构建交互式前端的技术探索
    89
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    168
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    150
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    184
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • JavaScript入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    DataWorks