组件
程序员文章站
2022-05-13 20:54:10
...
组件
- 组件化思维
组件化针对的是页面中的整个完整的功能模块划分 （项目的分工） - 组件的概念（ 一个文件 ）
组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体
优点：代码复用，便于维护
划分组件的原则：复用率高的，独立性强的
组件命名建议使用两种方式
使用 kebab-case
举例
Vue.component(‘header-title’,{})
使用 PascalCase
举例：
Vue.component(‘MyComponentName’, { /* … */ })
解释： 为什么要是上面两种写法 ? 为了区别html的原生标签
组件的嵌套
template
组件根元素唯一
data选项
为什么组件使用必须注册？
- vue.js文件中暴露出一个Vue的构造器函数， 这个函数的作用，是用来实例化出来一个实例， 那么这个实例也是一个组件， 我们称之为 ‘根实例’
- 我们从vue detools中我们发现这个实例的表现形式是一个标签
- Vue为了扩展功能， 给了一个方法 ， 这个方法叫 extend
- 我们对比 Vue vs Vue.extend() 我们发现这两个方法输出结果都是两个构造器函数， 并且很相似
- 那么我们进一步得到一个结果： 使用方法一致吗？
- new Vue.extend() 报错 不需要进行实例化 ， 它希望组件的表现形式应该是标签
- 要想像标签一样使用， 必须准守 h5 的标准 ， 也就是说组件必须合法 ， 要想合法， 必须注册（登记）
- 组件使用前必须注册
组件的注册有两种方式
- 全局注册
- 局部注册
注意：
全局 和 局部 指的范围
以下是全局注册和局部注册的标准写法
全局注册
<body>
<div id="app">
<Hello></Hello>
<Hello/>
</div>
<div id="app1">
<Hello></Hello>
</div>
</body>
<script>
/* Vue.extend({
template: 模板，
data(){},
mthods: {},
watch: {},
computed:{}
}) */
var Hello = Vue.extend({
template: '<div> hello component </div>'
})
// 全局注册： Vue.component(组件名,组件的配置项)
Vue.component('Hello',Hello)
new Vue({
el: '#app',
})
new Vue({
el: '#app1',
})
</script>
局部注册
<body>
<div id="app">
<Hello></Hello>
<Hello/>
</div>
<div id="app1">
<Hello></Hello>
</div>
</body>
<script>
var Hello = Vue.extend({
template: '<div> hello component </div>'
})
new Vue({
el: '#app',
components: {
'Hello': Hello
}
})
</script>
以下是全局注册和局部注册的简写
全局注册Vue.component(组件名称， 组件的配置项)
Vue.component('Hello',{
template: '<h3> Hello 全局注册</h3>',
computed: {
},
methods: {
},
watch: {
}
})
局部注册
new Vue({
el: '#app',
components: {
'hello-yyb': {
template: '<div> hello 骏哥今天干吗去了 </div>'
}
}
})
组件的嵌套
全局注册的嵌套
<body>
<div id="app">
<Father></Father>
</div>
</body>
<script>
/*
<Father>
<Son></Son>
</Father>
上面写法是错的 why? 组件的渲染内容是由配置项 template决定的
正确写法：
将子组件以标签的形式放在父组件的tempalte选项中
*/
Vue.component('Father',{
template: '<h3> father <Son></Son> </h3>'
})
Vue.component('Son',{
template: '<h3> son </h3>'
})
new Vue({
el: '#app',
})
</script>
局部注册的嵌套
<body>
<div id="app">
<Father></Father>
</div>
</body>
<script>
/*
总结：
组件嵌套： 局部注册形式
子组件必须在父组件中注册之后才能在父组件的模板中使用
*/
new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father <Son/> </div>',
components: {
'Son': {
template: '<h3> Son </h3>'
}
}
}
}
})
</script>
</html>
template外用
<body>
<div id="app">
<Hello></Hello>
</div>
<template id="Hello">
<div class="content">
<ul>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
<li><a href="">你好</a></li>
</ul>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#Hello'
})
new Vue({
el: '#app',
})
</script>
组件模板的根元素唯一
<body>
<div id="app">
<Hello></Hello>
<template>
<div> 第一个template </div>
</template>
</div>
<template id="Hello">
<div>
<div> 这是hello 组件的template </div>
<div> 这是hello 组件的template </div>
<div> 这是hello 组件的template </div>
<div> 这是hello 组件的template </div>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#Hello'
})
new Vue({
el: '#app',
})
</script>
总结：
- 组件的template如果body里面的话，一定记住要放在 #app 的div外
- 组件的template在body中使用的话， 是不会解析的， 但是组件内的template是会解析的
- 组件的模板中的直接子元素必须有一个， 如果你要有多个， 必须使用v-if v-else-if
组件data选项
<body>
<div id="app">
<Hello/>
</div>
<template id="Hello">
<div>
{{ msg }}
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#Hello',
data(){
return {
msg: 'hello 骏哥'
}
}
})
new Vue({
el: '#app',
data: {}
})
</script>
根实例中的data选项是一个对象， 但是组件中的data选项是一个函数， why?
解释：
函数的作用：
- 函数有独立作用域
- 函数可以有return 返回值 ，
组件的data选项必须有return 返回值， 并且返回值是一个对象
组件的数据在组件的模板中使用