vue基础知识总结（三）组件

组件

组件开发的好处

封装功能代码，提升开发效率
便于团队分工合作

组件的创建方式（三种）

注意：1.模板template中只能有一个根节点。2.组件名字如果采用驼峰命名，需要加上连字符‘-’，比如组件名为indexA 标签名为 index-a

1.使用Vue.extend()和Vue.component()两个方法创建全局组件

• Vue.extend()会返回一个组件的构造器，参数为一个对象，是一些配置项
• Vue.component()会利用Vue.extend()返回的构造器创建一个组件实例，两个参数，一个是组件名字，一个是组件的构造器

// 使用组件(在vue实例控制的区域)
<my-index></my-index>
let index = Vue.extend({
// 指定组件的模板
template: '<div>首页</div>'
})
// 创建一个全局组件 my-index
Vue.component('my-index', index)

2.直接使用Vue.component()创建(本质上还是要调用Vue.extend()方法)

// 2.使用组件
<index></index>
// 1.创建组件
Vue.component('index',{
template: '<div>首页</div>'
})

3.通过指定模板创建

// 2.定义模板(需要在vue实例管辖范围之外)
<template id="tpl">
<div>首页</div>
</template>
// 3.引用组件(在vue实例管辖范围内)
<index></index>
// 1.创建组件
Vue.component('index', {
template: '#tpl'

})

注意：构造Vue实例传入的各种选项大多数都可以在组件中使用，但data必须是一个函数(返回一个对象)

父子组件创建

• 通过components属性创建子组件

// 引用组件
<father></father>
// 创建组件
Vue.component('father',{
template: '<div> <p>父组件</p> <son></son></div>',
// 通过components属性创建子组件
components: {
//创建一个子组件
son: {
template: '<p>子组件</p>'
}
}

})

父组件传值给子组件

父组件怎么传值？（通过属性绑定传值）
子组件怎么接受？(通过props获取属性值)

1.声明props，用来接收从父组件传递过来的值

• props能够获取当前组件身上属性对应的属性值
• props可以跟一个数组，数组里面的值是一个字符串，这个字符串可以当属性

2.在使用子组件的地方，通过v-bind指令给子组件中的props赋值

// 引用组件
<father></father>
// 创建组件
Vue.component('father',{
template: '<div> <p>父组件</p> <son v-bind:sonname="name"></son></div>',
data(){
return {
name: 'zs'
}
},
// 通过components属性创建子组件
components: {
//创建一个子组件
son: {
props: ['sonname'],
template: '<p>子组件{{sonname}}</p>'
}
}

})

子组件传值给父组件

this.$emit 触发当前组件身上一个事件，发送一个值(如果传递多个值，可设置对象，或者数组)

<div id="app">
<father></father>
</div>

具体业务逻辑

Vue.component('father', {
template: `
<div>
<p>父亲年纪大了，记性不好，我儿子告诉我他叫{{mySonName}}</p>
<son @tellFatherMyname="getMySonName"></son>
</div>
`,
data () {
return {
mySonName: '????'
}
},
methods: {
// 这个函数中有一个默认参数，该参数就表示上传上来的值
getMySonName (data) {
// console.log(data);
this.mySonName = data
}
},
components: {
son: {
data () {
return {
myName: '小明'
}
},
template: '<button @click="emitMyname">点击就告诉我爸爸我叫{{myName}}</button>',
methods: {
emitMyname () {
// 子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，一个是需要传递的数据
this.$emit('tellFatherMyname', this.myName)
}
}
}
}
})

动态组件

• 利用component标签创建动态组件，他的is属性指向谁，就显示哪个组件(v-bink绑定其is属性)

// 创建动态组件，is属性设置显示内容
<component :is='index'></component>
// 此时显示inde组件
Vue.component('index',{
template: '<div>首页</div>'
})
Vue.component('list',{
template: '<div>列表</div>'
})