一、组件化的基本使用
-
创建组件构造器对象
const cpnC = Vue.extend({ template: ` <div> <h2> 标题 </h2> </div>` })
``(模版字符串)是ES6中的新的定义字符串的语法,最大的特点就是可以换行
//使用''的话,换行要用+ const str = 'abc' + 'bcd' //使用``的话 const str = `abc bcd`
-
注册组件
Vue.component('my-cpn', cpnC)
-
使用组件
<div id='app'> <my-cpn></my-cpn> </div>
整体代码
<div id='app'>
//3、使用组件
<my-cpn></my-cpn>
</div>
<script src="vue.js"></script>
<script>
//1、创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<h2>
标题
</h2>
</div>`
})
//2、注册组件
Vue.component('my-cpn', cpnC)
const app = new Vue({
el: '#app',
data: {
}
})
</script>
Vue.extend()
- 调用Vue.extend()创建的是一个组件构造器
- 通常在创建组件构造器时,传入template代表我们自定义组件的模版。
- 该模版就是使用到组件的地方,要显示的HTML代码
- 不过现在从vue2.x之后几乎不像这样写了
Vue.component()
- 调用Vue.component()是将刚才的组件构造器注册成一个组件,并且给它起一个组件的标签名称。
- 所以要传入两个参数:1、注册组件的标签名 2、组件构造器
组件还需要挂载在某个vue实例下才会生效
二、全局组件和局部组件
直接在script中写这个的就是全局组件
Vue.component('my-cpn', cpnC)
如果在vue实例下注册就是局部组件
compotents: {
//cpn使用组件时的标签名
cpn: cpnC
}
父组件和子组件
//子组件
const cpnC1 = Vue.extend({
template: `
<div>
<h2>
标题
</h2>
</div>`
})
//父组件
const cpnC2 = Vue.extend({
template: `
<div>
<h2>
标题
</h2>
<cpnc1></cpnc1>
</div>`,
components: {
cpnc1: cpnC1
}
})
//root组件
const app = new Vue({
el: '#app',
data: {
}
components:{
cpnc2: cpnC2
},
})
组件的语法糖使用
省去了调用Vue.extend()的步骤,而是直接可以使用一个对象来代替。
- 全局组件创建注册语法糖:
Vue.component('my-cpn', {
template: `
<div>
<h2>
标题
</h2>
<cpnc1></cpnc1>
</div>`
})
- 局部组件创建注册语法糖:
const app = new Vue({
el: '#app',
data: {
}
components:{
'cpn2': {
template: `
<div>
<h2>
标题
</h2>
<cpnc1></cpnc1>
</div>`
}
},
})
若在script中写太多html代码不好看,可以将其分离:
<script type="text/template" id="cpn">
<div>
<h2>
title
</h2>
</div>
</script>
//或者使用template标签
<template id="cpn">
<div>
<h2>
title
</h2>
</div>
</template>
<script src="vue.js"></script>
<script>
Vue.component('my-cpn', {
template: '#cpn'
})
const app = new Vue({
el: '#app',
data: {
}
</script>
组件不可以访问vue实例数据。vue组件应该有自己保存数据的地方。
组件数据存于data()中,data必须是一个函数,其返回一个对象,对象内部保存数据。
Vue.component('my-cpn', { template: `#cpn`, data() { return { title: 'abc' } } })
三、父子组件之间传递数据
父传子:props
<!-- Vue实例模版 -->
<div id="app">
<!-- 需要使用v-bind语法才可以让Vue识别movies为变量 -->
<cpn :cmovies="movies" :cmessage= "message"></cpn>
</div>
<!-- 子组件模版 -->
<template id="cpn">
<div>
<ul v-for="item in cmovies">{{item}}</ul>
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="vue.js"></script>
<script>
// 子组件
const cpn = {
template: '#cpn',
props: ['cmovies', 'cmessage'],
data(){
return{}
},
methods: {
}
}
// 父组件
const app = new Vue({
el: '#app',
data: {
movies: ['1', '2', '3'],
message: 'www'
},
components: {
cpn
}
})
</script>
props数据验证
props: {
// 1、类型限制
comive: Array,
cmessage: String,
// 2、提供一些默认值,或者一些必传值
cmessage: {
type: String,
default: 'flase',
required: true
},
// 类型是数组或者对象(Array或者Object)的时候,默认值必须是一个函数
cmovies: {
type: Array,
default() {
return []
}
}
}
子传父(自定义事件)
<!-- 父组件模版 -->
<div id="app">
<cpn @item-click="cpnClick"></cpn>
</div>
<!-- 子组件模版 -->
<template id="cpn">
<div>
<button v-for="item in catagories"
@click="btnClick(item)"
>{{item.name}}</button>
</div>
</template>
<script src="vue.js"></script>
<script>
// 子组件
const cpn = {
template: '#cpn',
data() {
return {
catagories: [
{id: 'aaa', name: 'one'},
{id: 'bbb', name: 'two'},
{id: 'ccc', name: 'three'},
]
}
},
methods: {
btnClick(item) {
// 发射事件: 自定义事件
this.$emit('item-click', item)
}
}
}
// 父组件
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn
},
methods:{
cpnClick(item) {
console.log('cpnClick', item);
}
}
})
</script>
自定义事件的流程
- 在子组件中,通过$emit()来触发事件。
- 在父组件中,通过v-on来监听子组件事件
四、父子组件的访问
- 父组件访问子组件:
$children
或$refs
- 子组件访问父组件 :
$parent
父访问子
-
$children
:一般用于取出所有子组件的message状态。<div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> <button @click="btnClick">1212</button> </div> <template id="cpn"> <div>我是子组件</div> </template> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好!' }, methods: { btnClick() { // 1、$children console.log(this.$children); console.log(this.$children[2].name); } }, components: { cpn: { template: '#cpn', data() { return { name: '子组件的name' } } }, } }) </script>
-
$refs
=>对象类型, 默认是一个空对象<cpn ref="aaa"></cpn> btnClick() { //2、$refs console.log(this.$refs.aaa); }
主要参考这个教学视频学习:https://www.bilibili.com/video/BV15741177Eh?p=1