Vue学习二——组件初始化、父子组件传值、插槽
一、组件化初始化
1.什么是组件以及组件化?
如果我们将一个页面中所有的处理逻辑全部放到一起。处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。为此,引出组件化的思想:
- 将一个完整的页面分成很多组件
- 每一个组件都用于实现页面的一个功能块
- 而每一个组件又可以进行细分
组件化提供了一种抽象,让我们可以开发一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一棵组件树。
2.注册组件的基本步骤
1.创建组件构造器
2.注册组件
3.使用组件
注册组件的步骤视图:
<div id="app">
<!-- 使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="../JS/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template : `
<div>
<h2>我是标题</h2>
<p>hahaha</p>
</div>`
})
// 2.注册组件
Vue.component('my-cpn',cpnC)
let app = new Vue({
el : '#app',
data : {
message : 'hello'
}
})
</script>
页面显示结果:
我是标题
hahaha
我是标题
hahaha
注册组件步骤解析:
-
Vue.extend():
调用Vue.extend()创建的是一个组件构造器 通常在创建组件构造器时,传入template代表我们自定义组件的模板 该模板就是在使用到组件的地方,要显示的HTML代码 事实上,这种写法在Vue2.x的文档中几乎以及看不到了,它会直接使用语法糖,是基础
-
Vue.component():
调用Vue.component()是将刚才的组件构造器注册成一个组件,并且给他起一个组件的标签名称 所以需要传递两个参数: 1.注册组件的标签名; 2.组件构造器
-
组件必须挂载在某一个Vue实例下,否则它不会生效
组件分类
-
全局组件和局部组件
全局注册组件的写法: Vue.component('cpn',cpnC) //这种写法在任何一个vue实例中均可以使用 局部注册组件的写法: //只可以在所挂载的某个实例中使用
let app = new Vue({
el : '#app',
data : {
message : 'hello'
},
components : {
// cpn就是使用组件时的标签名
// 局部注册组件,仅在app中可以使用
cpn : cpnC
}
})
- 父组件和子组件
在创建某一个组件中注册了另一个组件,其中创建组件的称为“父组件”,注册的组件称为“子组件”。
<div id="app">
<cpn2></cpn2>
</div>
<script src="../JS/vue.js"></script>
<script>
// 1.创建第一个组件构造器对象(子组件)
const cpnC1 = Vue.extend({
template : `
<div>
<h2>我是标题</h2>
<p>hahaha</p>
</div>`
})
// 创建第二个组件构造器(父组件)
const cpnC2 = Vue.extend({
template : `
<div>
<h2>我是标题</h2>
<p>heiheiheihei</p>
<cpn1></cpn1>
</div>
`,
//在组件二中注册组件一
components : {
cpn1 : cpnC1
}
})
// 2.注册组件
// Vue.component('my-cpn',cpnC1)
// root组件
let app = new Vue({
el : '#app',
data : {
message : 'hello'
},
components : {
cpn2 : cpnC2
}
})
</script>
在父组件中注册的子组件其作用域就是父组件,要是想要在全局作用还需要在vue实例中注册。
注册组件的语法糖:
- 全局组件语法糖
<script>
Vue.component('cpn1',{
template : `
<div>
<h2>我是全局组件语法糖</h2>
<p>hahaha</p>
</div>`
})
</script>
- 局部组件语法糖
<script>
let app = new Vue({
el : '#app',
data : {
message : 'hello'
},
components : {
'cpn2' : {
template : `
<div>
<h2>我是局部组件语法糖</h2>
<p>hahaha</p>
</div>`
}
}
})
</script>
组件模板的分离写法:
使用<script>标签:<script type="text/x-template" id="cpn">
<div id="app">
<!-- 使用组件 -->