Vue学习笔记 3 - 组件化 / slot(插槽)
组件化
-
组件化是 Vue.js 中的重要思想
- 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
- 任何的应用都会被抽象成一颗组件树。
基本步骤
-
组件化的使用分为三个步骤
- 调用
Vue.extend()方法创建组件构造器 - 调用
Vue.component()方法注册组件 - 在 Vue 实例的作用范围内
使用组件
- 调用
-
全局组件
<div id="app">
// 3.使用组件
<cpn></cpn>
</div>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
标题 1
内容 1111
`
})
// 2.注册组件
Vue.component('cpn', cpnC)
const app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
标题 1
内容 1111
-
局部组件
<div id="app">
<cpn></cpn> //正常使用组件
</div>
<div id="app2">
<cpn></cpn> //报错
</div>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
标题 1
内容 1111
`
})
const app = new Vue({
el: '#app',
data: {},
// 2.注册组件
components: {
cpn: cpnC
}
})
const app2 = new Vue({
el: '#app2',
data: {},
methods: {}
})
</script>
标题 1
内容 1111
父组件与子组件
<script>
//子组件
const cpnC1 = Vue.extend({
template: `
标题 1
内容 1111
`
})
//父组件
const cpnC2 = Vue.extend({
template: `
标题 2
内容 2222
`,
components: {
cpn1: cpnC1
}
})
//root组件
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
cpn: cpnC2
}
})
</script>
<div id="app">
<cpn></cpn>
</div>
标题 1
内容 1111
标题 2
内容 2222
组件的语法糖注册方式(推荐写法)
语法糖主要是省去了调用Vue.extend()的步骤，而是可以直接用一个对象来代替
-
全局组件
<div id="app">
// 3.使用组件
<cpn></cpn>
</div>
<script>
Vue.component('cpn', {
template: `
标题 1
内容 1111
`
})
const app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
标题 1
内容 1111
-
局部组件
<div id="app">
<cpn></cpn> //正常使用组件
</div>
<div id="app2">
<cpn></cpn> //报错
</div>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
'cpn': {
template: `
标题 1
内容 1111
`
}
}
})
</script>
标题 1
内容 1111
组件模板抽离的写法
刚才我们通过语法糖简化了 Vue 组件中的注册过程，另外还有一个地方的写法比较繁琐，就是 template 模块写法。
components: {
'cpn': {
template: `
标题 1
内容 1111
`
}
}
如果我们能将 template 模块中的 HTML分离出来，然后挂载到对应的组件上，结构必然会更加清晰。
<div id="app">
<cpn></cpn>
</div>
<script>
Vue.component('cpn',{
template:'#cpn'
})
const app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
- 使用