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

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

2024-08-21 40
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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
目录
相关文章
我是快乐的嘟嘟
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
61 26
html的七十二变
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
22 8
html的七十二变
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
17 7
html的七十二变
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
21 5
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
13 3
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
20 5
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
12 2
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
17 4
游客zi3qmblbcdexu
|
11天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
36 5
zhaojiaxing123
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式，适用于任意组件间通信
zhaojiaxing123
69 0

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    一文梳理Vue3核心原理
  • 4
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 5
    vite原理之解析.vue文件
  • 6
    自制简单的range（Vue）
  • 7
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 8
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 9
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 10
    毕业设计｜基于NODE+VUE的校园跑腿平台系统
  • 1
    深入了解前端框架Vue.js的响应式原理
    52
  • 2
    Vue3 五天速成（下）
    67
  • 3
    Vue3 五天速成（中）
    57
  • 4
    Vue3 五天速成（上）
    83
  • 5
    vue3版本的爱心源码
    24
  • 6
    Vue当前时间与接口返回时间的判断
    46
  • 7
    vue生成动态表单
    32
  • 8
    Vue生成Canvas二维码
    40
  • 9
    vue项目切换页面白屏的解决方案
    151
  • 10
    Vue3 项目中怎么使用 jsx——易懂
    44

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云OSS设置跨域访问