vue组件

本文深入讲解Vue.js组件的原理与使用,包括组件的注册、动态组件、组件的嵌套及通信,探讨data选项的重要性,以及如何利用template标签构建组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue组件

1.组件原理:

通过Vue.extend()实现的Vue的扩展功能。

2.注册组件:

1.原理本质:

注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。

2.全局注册:

注册的作用是为了使用Vue来进行解析

template选项是为了确定一个模板,模板中写的就是jsx

Vue.component(组件的名称,组件配置)

组件用大写表示,作用是为了区分原生html提供的标签

html:

js: const Lxy = Vue.extend({

template:’

hello vue

});

Vue.component(‘Lxy’,Lxy);

简写:
Vue.component(‘Lxy’,{

template:’

hello vue

});

3.局部注册:

const Lxy = Vue.extend({

template:’

hello vue

})

new Vue({

el:’#app’,

components;{

‘Lxy’ : Lxy

}

});

简写:

new Vue({

​ el: ‘#app’,

​ components: {

​ ‘Lxy’: {

​ template: ’

局部注册

​ }

​ }

​ })

4.动态组件:

is属性:作用就是将一个绑定的容器解析为一个组件的模板

动态组件:可以改变得组件,Vue提供了 component 的动态组件;

使用方法:

动态缓存:

deactived: 表示正在使用的应用;

inactived: 表示将使用过的组件放在后台,再次使用时,直接在后台拿;

:包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中;当组件在 <keep-alive> 内被切换,它的 activateddeactivated 这两个生命周期钩子函数将会被对应执行。

5.标签:

1.特点:

在实例范围内书写template标签,那么将来它是不会在渲染中出现的*

标签在实例范围外是直接显示的*。

2.在标签里写组件的模板:

html:

    <div>

        <p> Hello  模板 </p>

        <div> 你好 </div>

js:

Vue.component(‘Hello’,{

​ template: ‘#hello’

​ })

注:组件的template模板中要求根源是唯一

6.组件里的data选项:

1.为什么data选项必须是一个函数?

- 因为每个实例都要生成一个独立的数据对象,避免每个实例的数据操作相互影响*

*- 因为组件的数据必须要有独立的作用域,避免每个data数据相互影响。

2.为什么data选项要返回一个对象?

- 因为Vue深入响应式原理要求是对一个对象进行getter和setter设置

3.组件和实例的数据不能相互获取

4.写法:

Vue.component(‘Hello’,{

​ template: ‘#hello’,

​ data () {

​ return {

​ money: 2000

​ }

​ }

​ });

7.组件的嵌套:

组件嵌套就是将子组件以标签化的形式放到父组件的模板中

写法:

    <div>

​ father

​ son

8.父子组件的通信:

props选项:*用来接收来自父组件的数据,可以是数组或对象;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值