vue组件
1.组件原理:
通过Vue.extend()实现的Vue的扩展功能。
2.注册组件:
1.原理本质:
注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。
2.全局注册:
注册的作用是为了使用Vue来进行解析
template选项是为了确定一个模板,模板中写的就是jsx
Vue.component(组件的名称,组件配置)
组件用大写表示,作用是为了区分原生html提供的标签
html:
js: const Lxy = Vue.extend({template:’
});
Vue.component(‘Lxy’,Lxy);
简写:
Vue.component(‘Lxy’,{
template:’
});
3.局部注册:
const Lxy = Vue.extend({
template:’
})
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> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
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选项:*用来接收来自父组件的数据,可以是数组或对象;
本文深入讲解Vue.js组件的原理与使用,包括组件的注册、动态组件、组件的嵌套及通信,探讨data选项的重要性,以及如何利用template标签构建组件。
1546

被折叠的 条评论
为什么被折叠?



