Vue学习笔记(5)--组件化的基本使用、父子组件间的访问和传递数据
一、组件化的基本使用
-
创建组件构造器对象
const cpnC = Vue.extend({ template: `` })标题
``(模版字符串)是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: `
标题
`
})
//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: `
标题
`
})
//父组件
const cpnC2 = Vue.extend({
template: `
标题
组件的语法糖使用
省去了调用Vue.extend()的步骤，而是直接可以使用一个对象来代替。
- 全局组件创建注册语法糖：
Vue.component('my-cpn', {
template: `
标题
- 局部组件创建注册语法糖：
const app = new Vue({
el: '#app',
data: {
}
components:{
'cpn2': {
template: `
标题
若在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
<div id="app">
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">1212button> 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