组件
-Vue里面组件的扩展功能是通过 Vue.extend() 来做扩展的
-console.log( Vue ) // new Vue( options )
-console.log( Vue.extend()) // 组件的扩展中的options和 new Vue( options )使用一致 Vue.extend()不进行实例化 也就是不用 new Vue.extend()
创建组件的两种方式
1、全局组件
-在所有的Vue实例中都能使用
-注意：先注册组件，在初始化根实例
2、局部组件
组件的介绍
- Vue.extend() 不会进行实例化
- Vue中组件的使用方式 类似于 标签的使用
- 为了符合H5的规范，我们需要将这些类似于标签一样的内容进行注册
- 注册的作用是为了使用Vue来进行解析
组件的注册
-全局注册：
Vue.component(组件的名称，组件配置)
eg:
<script>
const Hello = Vue.extend({
// template选项是为了确定一个模板，模板中写的就是jsx
template: '<div> Hello Component</div>'
})
// 组件用大写表示，作用是为了区分原生html提供的标签
Vue.component('Hello',Hello)
new Vue({
el: '#app'
})
new Vue({
el: '#root'
})
</script>
-局部注册：
写在实例内部的
eg:
<script>
const Hello = Vue.extend({
template:'<div> Hello Component </div>'//template选项是为了确定一个模板
})
new Vue({
el:'#app',
components:{
'Hello' : Hello
}
})
new Vue({
el:'#root',
components:{
'Hello':Hello
}
})
</script>
组件的发展
-选项可以不适用Vue.extend() 来得到，可以直接写在注册的配置项中
比如：Vue.component('Hello',options)
全局注册简写：
eg：
Vue.component('Hello',{
template: '<div> nihao </div>'
})
new Vue({
el:'#app',
})
new Vue({
el:'#root',
})
局部注册简写：
eg:
new Vue({
el:'#app',
components:{
'Hello':{
template:'<div> nihaoo </div>'
}
}
})
new Vue({
el:'#root',
components:{
'Hello':{
template:'<div> nihao</div>'
}
}
})
组件的命名：
-单个单词首字母大写
-两个单词首字母大写
-两个单词小写之间用-连接
eg:
组件的规则
- html中有些特殊的标签，直接父子关系的标签
- 比如：table tr td / ul li / ol li / dl dt dd / select option
- 这类有直接父子关系的标签，是不能直接用组件代替的。
- 如果代替了，这类型的标签父级会将组件排斥在外面。
解决办法、:
***is属性
is属性的作用是将一个绑定的容器解析为一个组件的模板。
eg:
<body>
<div id="app">
<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<!-- <Hello></Hello> -->
<tr is = " Hello "></tr>
</div>
</body>
<script>
Vue.component('Hello',{
template:
`
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
`
})
new Vue({
el:'#app',
})
</script>
***** is属性-动态组件 （可以改变的组件）
----vue中提供了一个叫 component 的动态组件
-动态缓存：
deactived 正在使用应用
inactived 将应用/组件 放到后台，
**<keep-alive></keep-alive>组件的好处：类似于手机应用的后台
eg:
<link src="./is属性-动态组件.html">
***template标签：
特点：
1、如果在实例范围内书写template标签，渲染中是不会出现该标签
2、template标签在实例范围外可以直接显示
3、组件的模板可以放在实例范围外书写，但是会造成渲染之后的template标签还会显示在文件中。
4、组件的template模板中要求根源是唯一
eg:
{{info}}
你好
{{money}}
})
组件的嵌套
定义：组件嵌套就是将子组件以标签化的形式放到父组件的模板中
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
