10-04-vue组件

最新推荐文章于 2024-05-06 14:16:34 发布
最新推荐文章于 2024-05-06 14:16:34 发布
阅读量388 收藏
点赞数 1
分类专栏： 10-Vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ange997/article/details/108393547
版权

组件

什么是组件

在html中，我们学习的单元是标签。 可以把Html中的标签当成最小最小最小的组件。
在vue中，我们学习的单元是组件
组件就是我们自己扩展的 “HTML 元素”，封装可重用的代码。
在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。
组件（Component）是 Vue.js 最强大的功能之一。
在vue当中，一切都是组件，写项目就是在写组件。
一个组件本质就是一个对象。
区别：

  • 根组件（vue的实例）它有el。而子组件中有template
  • data的写法不同。根组件中就是对象，子组件中是函数。

子组件中，同样可以也包含子组件

什么是根组件

在 let vm = new Vue({}) 我们得到 的vm是一个Vue的一个对象（或者叫实例）
它也可以理解为一个组件，只不过它是一切其它的组件的根组件
一个项目就通常只有一个根组件

子组件

  • 全局组件 全局注册一个子组件
  • 局部组件 局部注册一个子组件

组件三步曲：

  1. 定义组件 难
  2. 注册组件 Vue.component(“my-header” ） 全局注册 在所有的根组件中都可以使用
  3. 使用组件 使用组件就是在使用标签

定义组件template 下，data必须是一个函数，而且必须返回一个对象。

全局子组件

全局：所有的vue实例都可以使用
在使用一个组件时，当成自定义标签就OK了
在这里插入图片描述
自定义标签默认都是行内的，都是女标签。
可以通过vue.extend与vue.component来定义组件。

<body>
<!--是根组件的模板-->
<div id="app1">
    <!--3）使用子组件-->
    <my-header></my-header>
</div>
<div id="app2">
    <!--3）使用子组件-->
    <my-header></my-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 定义一个全局组件  一个组件就是一个JS对象
    // Vue.component();第1个参数是组件的名字，第2个参数代表这个组件
    // 组件指的是：
    /*      一个组件就是一个JS对象
            {
                // tempplate 指定子组件的模板
                template:"<div>{{msg}}</div>",
                data(){		//在自组件中data 必须是函数，必须返回对象
                    return{
                        msg:"hello 子组件"
                    }
                }
            }
    */
    // Vue.component 表示注册一个组件
    Vue.component("my-header",{
        // tempplate指定子组件的模板
        template:"<div>{{msg}}</div>",
        data(){
            return{
                msg:"hello 子组件"
            }
        }
    });
        // 1）定义组件
    let myComponent = {
        template: "<div>{{msg}} <button @click='f1'>点击</button></div>", // 当前组件模板
        data(){ return { msg:"hello component" } }, // 给当前组件提供数据
        methods:{ f1(){console.log("f1....")} }, // 当前组件模板中使用到的方法
    }
    // 2）注册组件  注册分全局注册和局部注册   由于是全局注册，意味着在所有的根组件对应的模板中都可以使用
    Vue.component("my-header",myComponent);
    let vm1 = new Vue({
        el:"#app1",
    })
    let vm2 = new Vue({
        el:"#app2",
    })
</script>
</body>

组件的名字：

  1. 组件的定义时的名字
  2. 组件的注册时的名字
  3. 组件使用时，使用的是注册时的名字

我们很少会用全局组件，因为，在一个页面中，我们只会设置一个vue实例。

局部子组件

局部子组件就是说注册一个组件，这个组件只属于某个根组件
局部组件就是要去配置一下components这个选项。（就和配置 methods,data,filters,computed 一样）

<div id="app1">
    <!-- 3）使用子组件-->
    <my-header></my-header>
</div>
<script>
    // 1) 定义子组件
    let myComponet = {
        template:"<div>{{msg}}</div>",
        data(){ return{ msg:"hello 局部注册子组件" } }
    }
    let vm1 = new Vue({
        el:"#app1",
        // 2）局部注册一个子组件
        components:{
            "my-header":myComponet
        }
    })
</script>

template

<body>
<!--根组件模板-->
<div id="app">
    <abc></abc>
</div>
<!--子组件模板-->	//常用
<!--<template id="test">
    <div>
        <div>我是一个div</div>
        <p>我是一个p标签</p>
        <h1>我是一个h1</h1>
    </div>
</template>-->
<script type="text/html" id="test">
    <div>
        <div>我是一个div</div>
        <p>我是一个p标签</p>
        <h1>我是一个h1</h1>
    </div>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let com = {
        /*template:"<div><div>div</div><span>span</span></div>",*/
        template:"#test"
    }
    let vm = new Vue({
        el:"#app",
        components:{
            "abc":com
        }
    })
</script>
</body>

配置template注意点：

  • template指令模板时，必须使用根标签包起来，否则报错：Component template should contain exactly one root element.

template指定模板常见的方式：

  • template:后面写字符串
template:"<div><div>div</div><span>span</span></div>"
  • 把模板定义到外面，在template引用
A）<template id="test">	//常用
     <div>
     	<div>我是一个div</div>
     	<p>我是一个p标签</p>
     	<h1>我是一个h1</h1>
     	</div>
  </template>
B）<script type="text/html" id="test">
       <div>
           <div>我是一个div</div>
           <p>我是一个p标签</p>
           <h1>我是一个h1</h1>
        </div>
   </script>

组件的名字

!--根组件模板-->
<div id="app">
    <!--现在下面的写法不OK  后面还是这样的写法-->
    <!--<MyHeader></MyHeader>-->

    <!--现在，手动换成小驼峰也不OK-->
    <!--<myHeader></myHeader>-->

    <!--中划线命名是OK-->
    <my-header></my-header>
    <my-footer></my-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // MyHeader 定义组件时的名字
    let MyHeader = {
        template:"<div>MyHeader...</div>"
    }
    let vm = new Vue({
        el:"#app",
        components:{
            // MyHeader 注册组件时的名字和定义组件时名字一样
            MyHeader,
            "my-footer":{
                template: "<div>MyFooter....</div>"
            }
        }
    })
</script>

使用组件三步曲之名字：

  • 定义组件时，最好使用大驼峰命名

  • 注册时，可以和定义组件时名字一样

  • 目前来说，使用组件时，不要使用大驼峰，但是后面，我们会使用大驼峰

    如果说，定义组件和注册组件都是大驼峰，使用组件时，名字换成中划线
    在这里插入图片描述

子组件中的数据项

与vm实例中的data语法不同：
子组件中的data是一个函数，在其中写return { }。这是固定写法：

let 组件名 = {
   template:””,
   data:function(){
      return {
             //数据项
		}
	}
}

如果你在data中使用到了this，那么，你的data函数不能简写，简写后的箭头函数中没有this。

组件的嵌套

在一个组件中使用 components 去注册另一个组件，就可以使用注册的那个组件了。

<!--根组件模板-->
<div id="app">
    <Father></Father>
</div>
<!--Father组件对应的模板-->
<template id="father">
    <div>
        <h1>Father组件 ---》{{fatherData}}</h1>
        <Son></Son>
    </div>
</template>
<!--Son组件对应的模板-->
<template id="son">
    <div>
        <h1>Son组件 ---》{{sonData}}</h1>
    </div>
</template>
<script>
    let Son = {     // 定义Son组件对象
        template:"#son",
        data(){ return { sonData:"Son组件中的data" } }
    }
    let Father = {   // 定义Father组件对象
        template:"#father",
        data(){ return { fatherData:"Father组件中的data" } },
        components:{
            Son     // 在Father组件中注册Son组件  
            // 就可以在Father组件所对应的模板中使用Son组件
        }
    }
    let vm = new Vue({
        el:"#app",
        components:{
            Father,
        }
    })
</script>

组件数据传递 - 父传子

完整代码简介

把根组件作为父组件。父子之间不能正常共享数据的，父中的数据在子中是没有办法使用。

一个组件中的数据，默认情况下，只能让本组件所对应的模板使用，其它组件所对应的模板不能使用。但是可能通过一定的段，让子组件也可以使用父组件所对应的数据，也就是说需要把父组件中的数据传递到子组件，让子组件使用。这叫父传子。如果说把子组件中数据，传递给父组件，让父组件使用，那叫做子传父。

<!--根组件模板-->
<div id="app">
    <Father></Father>
</div>
<!--Father组件对应的模板-->
<template id="father">
    <div>
        <h1>Father组件 ---》{{fatherData}}</h1>
        <Son :xxx="fatherData"></Son>
    </div>
</template>
<!--Son组件对应的模板-->
<template id="son">
    <div>
        <h1>Son组件 ---》{{sonData}}</h1>
        <!--你在SON组件中使用Father组件中数据就报错-->
        <!--<h2>要Son组件中使用Father组件中的数据 -&#45;&#45;》 {{fatherData}}</h2>-->
        <h2>使用父组件传递过来的数据：{{xxx}}</h2>
    </div>
</template>
<script>
    let Son = {
        template:"#son",
        props:{
            // fatherData是接收的数据   String是对数据检验
            // 我期待父组件传给子组件的数据的类型是String
            xxx:String
        },
        data(){ return { sonData:"Son组件中的data" } }
    }
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的data" } },
        components:{
            Son
        }
    }
    let vm = new Vue({
        el:"#app",
        components:{
            Father,
        }
    })
</script>

HTML中标签：

<h1 title="hello"></h1>  title="hello" html中自带的属性
<h1 abc="123"></h1>  abc="123" html中自定义属性
<Son abc="123"></Son>  <Son>不是html中的标签  组件
<Son abc="123"></Son>  abc="123" 自定义属性
<Son title="hello"></Son>  title="hello" 自定义属性

传输步骤

传递数据就靠自定义属性
第一步：在父组件所对应模板中使用子组件，属性位置绑定父组件中的数据

<template id="father">
  <div>
    <h1>Father组件 ---》{{fatherData}}</h1>
    <Son :xxx="fatherData"></Son>
  </div>
</template>

第二步：在子组件中通过props接收数据，如下：

let Son = {
   template:"#son",
     rops:{
      // fatherData是接收的数据   String是对数据检验
       // 期待父组件传给子组件的数据的类型是String
      xxx:String
    },
   data(){ return { sonData:"Son组件中的data" } }
}

第三步：在子组件所对应的模板中就可以使用父组件传递过来的数据了

  <template id="son">
    <div>
      <h1>Son组件 ---》{{sonData}}</h1>
      <h2>使用父组件传递过来的数据：{{xxx}}</h2>
    </div>
  </template>

props：

一个组件的配置项，作用：接收父组件传递过来数据。 如父组件中绑定了一个数据：

props:{
    xxx:{
        type:String,  // 期待父组件传递过来一个String类型的数据
        // required:true, // 必须要求父传递数据
        default:"lalala",  // 配置默认值
    }
},		//type:[String,Number] 表示string和number都可以

单个可以简写：

props:{
       xxx:Number
}

步骤传输

  1. 在父组件中，正常定义自己的数据
    父中有数据了，就意味着在父的视图中就可以得到数据了
  2. 在父组件的模板中通过属性绑定把数据绑定到子组件上
  3. 在子组件中定义props属性。用来接收父组件传递的数据
  4. 在子组件模板中使用数据
  5. 在子组件中的函数中使用数据

父传子有一个核心 子组件中的props配置项
父子传递，讲究”你情我愿”，父需要绑定数据，子需要接收数据

组件数据传递 - 子传父

自定义属性-自定义事件

HTML标签才有自带属性
只要不是HTML标签，里面写的都叫自定义属性

<button title="haha">登录</button>  title="haha" 标签自带属性
<Son title="haha"></Son>  title="haha" 自定义属性

标签的点击事件
给html标签上button按钮绑定一个点击事件，当我们点击时，调用f1方法，不需要写代码，只需要鼠标点击就会触发点击事件

<button @click="f1"></button>  html标签   click自带事件

非HTML标签的自定义事件
不能说：给Son上绑定一个点击事件
给Son组件上绑定了一个自定义事件， 需要写代码去触发这个自定义事件

<Son @click="f1"></Son> 不是html标签  自定义事件
<Son @Hello="f1"></Son> 不是html标签  @Hello="f1  自定义事件  订阅事件

事件分两类：

  • 浏览器自带的事件 click 点击了
  • 自定义事件 Hello 需要写代码触发Hello事件 发布订阅

发布订阅难点：

<Son hello="ff"></Son>	 	自定义属性	值是 "ff" 字符串
<Son :hello="ff"></Son>		自定义属性  值是  ff  对应的数据
<Son @hello="ff"></Son>	自定义事件  事件发生时执行 ff 方法

子传父完整代码

<!--根组件模板-->
<div id="app">
    <Father></Father>
</div>
<!--Father组件对应的模板-->
<template id="father">
    <div>
        <h1>Father组件 ---》{{fatherData}}</h1>
        <h3>来自于子组件的数据：{{datafromson}}</h3>
        <hr>
        <!--hello是一个自定义事件，需要写代码触发这个自定义事件，当这个事件发生时，会调用f1方法-->
        <!--订阅一个事件-->
        <Son @hello="ff"></Son>
    </div>
</template>
<!--Son组件对应的模板-->
<template id="son">
    <div>
        <h1>Son组件 ---》{{sonData}}</h1>
        <button @click="sf">点击</button>
    </div>
</template>
<script>
    let Son = {
        template:"#son",
        data(){ return { sonData:"Son组件中的data" } },
        methods:{	// this.$emit() 触发一个自定义事件  
            sf(){	 // 在发布时就可以传递数据了
                this.$emit("hello",this.sonData)
            }	//this当前组件对象，vue中默认挂了 $emit
        }
    }
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的data",datafromson:"", } },
        methods:{
            ff(msg){
                console.log("ff....: ",msg);
                this.datafromson = msg;
            }
        },
        components:{
            Son
        }
    }
    let vm = new Vue({
        el:"#app",
        components:{
            Father,
        }
    })
</script>

重点步骤

在子模板的里面使用点击事件，点击调用方法，然后方法会触法一个自定义事件{ this.$emit(“自定义”)}，可以传递参数。这个自定义事件在父模板使用子模板时绑定到子模板上的，这个自定义事件写在父模板的方法里面，形参就是接收的数据。

  1. 子组件的模板绑定一个天生点击事件，点击时调用子的方法 ff1

    <button @click="ff1">点击</button>

  2. 在子组件的方法中的 ff1 中使用 this.$emit(“ange”)，触发该自定义事件：发布

    ff1(){ this.$emit( "ange" ,this.sonData)}  传递数据sonData

  3. 在父组件的模板中使用子组件，用触发的自定义事件去调用父的方法 ff2 : 订阅

    <Son @ange="ff2"></Son>	父模板使用子组件

data(){ dataformson:"")
ff2(msg) {console.log(msg)；	方法2接收子传递的数据
this.dataformson = msg	}	接收的数据赋值给父组件

父传子和子传父

父传子：

  1. 在父组件对应的模板中绑定自定义属性
  2. 在子组件中通过props接收自定义属性（数据）
  3. 在子组件中就可以使用这些数据

子传父：

  1. 在父组件对应的模板中子组件上绑定自定义事件
  2. 在子组件中触发自定义事件，触发自定义事件时，可以携带数据
  3. 在父组件中，当自定义事件发生时，调用监听器，监听器的形就是接收到的数据

vue中组件通信方案：

  1. 父传子 绑定自定义属性 + props接收
  2. 子传子 绑定自定义事件 + this.$emit() 触发自定义事件并携带数据
ange997
关注
专栏目录
Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法
共同学习，共同成长
06-24 2137
大家好，我是码喽的自我修养！今天给大家分享【Vue-Router路由动态缓存组件(keep-alive)，vue2/vue3不同写法】，超详细讲解！
Vue3视频播放器组件Vue3-video-play入门教程
热门推荐
猿小白的博客
03-11 2万+
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。
vue 组件
weixin_45856470的博客
10-07 368
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为
Vue基础--组件的创建和使用
qq_44749491的博客
09-28 2497
Vue组件的基本使用
vue中的组件介绍
weixin_48864616的博客
12-31 1155
组件就是用来提高代码的复用性的。 组件的本质：上是一个可复用的小号的vue实例。 vue实例（new Vue）是最大的根组件。 组件在使用时就是一个自定义的标签。 组件分类：全局和局部。 定义全局组件： Vue.component(“组件名”,配置对象) （全局组件可以用在不同的实例中） 组件渲染的结果是template中的内容！！！ 【注意】： 1.template中的内容必须被一个元素包含。 这个元素被称为根节点（根元素） 2.每个组件有且只能有一个根元素。 template标签： 作用：模板占位符
vue 组件-组件定义的4种方式
chelflan's blog
06-16 7827
一、组件命名的方式 　　①kebab-case，单词之间采用  - （短横线）连接，例如：my-component ，在DOM中使用时，<my-component ></my-component > 　　②PascalCase，驼峰式名称，单词之间，首字母大写，例如：MyComponent，但是在DOM中使用时，必须更改为，<my-com...
18-组件化开发 & 根组件
m0_58250910的博客
08-19 279
2. 根组件:整个应用最上层的组件，包裹所有普通小组件。组件分类: 普通组件 , 根组件。
前端组件拆分思路及通信设计（vue2.0）-组件拆分原则-vue组件-vue组件拆分原则-v
默的博客
06-09 1779
因为本文冗长，有一些是考虑对于小白上手所需技能，需要直接考虑组件拆分思路，建议直接进入 三、1） 组件拆分原则 六、一般的组件化内容 因为组件的知识点过多，本文是用于闲（摸 ）暇（鱼 ）时间写的，具体某个功能的用法，强烈建议翻阅其他文章或官网.........
vue-awesome（基于Vue.js的SVG图标组件）
郭宝的博客
08-17 5748
vue-awesome 是什么？ Vue-Awesome 是基于Vue.js的 SVG 图标组件，内置图标来自Font Awesome。 GitHub 介绍地址：https://github.com/Justineo/vue-awesome/blob/master/README.zh_CN.md 怎么使用vue-awesome ? 1、首先通过 npm 安装vue-awesome npm install vue-awesome 2、在 main.js 中的全局引入 // 在不关心...
vue-在组件中使用v-model
小陈的博客
08-23 1万+
当我们使用。
前端知识总结
qq_44749275的博客
11-18 1276
面试知识点总结
vue组件
liutianxiao123的博客
03-29 146
vue组件 拆分代码量 组件化:是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一 全局组件定义四种 注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！ 1.使用 Vue.extend 配合 Vue.component 方法 Vue.component(“register”,Vue.extend({template:‘hh’})) 2.直接使用 Vue.component 方
Vue基础入门（3）- 组件化开发、根组件和普通组件、组件的三大组成部分（结构/样式/逻辑）、组件通信、非父子组件通信、v-model、异步更新、自定义指令、插槽和路由、ESlint代码规范及手动修复
qq_55626883的博客
03-05 1043
组件化开发、根组件和普通组件、组件的三大组成部分（结构/样式/逻辑）、组件通信、props、非父子组件通信、v-model、ref和$refs、异步更新、自定义指令、插槽和路由、ESlint代码规范及手动修复
根组件，父组件，子组件。app这里是根组件。PostItem是子组件，PostList是父组件
weixin_40945354的博客
03-02 372
<!DOCTYPE html> <div id="app"> <Post-list></Post-list> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({}); const PostItem = { props: ['postTitle'], template:
Vue -组件
张锦的博客
04-12 4733
1、组件的作用： 组件（Component）是Vue.js最强大的功能之一。. 组件可以扩展HTML元素，封装可以重复使用的代码。. 在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。 2、组件的分类： 在vue中组件可以分为全局组件和局部组件。 全局组件：所谓的全局组件就是不仅仅可以在一个vue实例中使用，在其他vue实例中也可以使用 的组件。 局部组件：所谓的局部组件就是只能在某个vue实例中使用的组件，在其他的vue实例中不能使 ...
Vue面试系列之七：为什么vue组件模板只有一个根元素？
jmsLU的博客
08-13 2779
对于这个问题，我们从以下三个方面来考虑： new Vue({el:'#app'}) 单文件组件中，template下的元素div。其实就是“树”状数据结构中的“根” diff算法要求的，源码中，patch.js里patchVnode() 首先，实例化Vue时： <body> <div id="app"></div> </body> <script> var app=new Vue({ el:"#app"
（三）VUE组件及插槽概览
thisiscocoa的博客
05-19 412
简介 本文前半部分先从简单vue应用进行拓展，引申出计算属性、侦听器、过滤器的概念，接着介绍生命周期（钩子函数）。后半部分介绍VUE重要概念 - 组件，组件的XXXXX等。 计算属性、侦听器、过滤器 计算属性 在模板中放入太多的逻辑会让模板过重且难以维护，如下图： <div id="example"> {{ message.split('').reverse().join('') }} </div> 为了解决这个问题，对于任何复杂逻辑，应当使用计算属性：computed 直接看
组件化开发&根组件
最新发布
m0_74462339的博客
05-06 552
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
vue的应用实例和组件实例
qq_42445025的博客
08-03 1266
vue的应用实例和组件实例 创建一个vue的应用实例 通过createApp函数创建 const app = Vue.createApp({}) //app就是应用实例 应用实例可以用于注册全局组件 app.component('组件名',Xcomponent) 应用实例上的很多方法都允许链式 Vue.createApp({}) .component('组件名',Xcomponent) 之所以可以进行链式调用，是因为它们都返回同一个app实例 根组件 利用c
使用vue-cli快速构建vue项目教程
- `src`：源代码目录，包含`App.vue`（主组件）、`main.js`（入口文件）、`components`（组件）和其他相关文件。 - `public`：静态资源目录，任何放置在此处的文件都会被复制到最终的打包结果中。 - `build`：包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值