先来介绍一下Vue组件的类型
1.全局组件
Vue.component('my-component-name', {
// ... 选项 ...
})
//使用时
<div id="app">
<my-component-name></my-component-name>
</div>
2.局部组件
var ComponentA = {
data:...
template:...
methods:...
}
new Vue({
el: '#app',
components: {
'component-a': ComponentA
}
})
3.单文件组件
.vue文件，一个文件就是一个组件，一般vue构建一个项目时用到。
//一般三部分组成
<template>
<style>
<script>
组件通信的方法
props和$emit
父组件给子组件传值：父组件给子组件设置自定义属性，子组件添加props来接受属性。
子组件给父组件传值：父组件给子组件设置自定义函数，子组件通过$emit给父组件的自定义函数传递参数 ，父组件通过接收参数获取到子组件传递过来的值。
let parent = {
data: function () {
return {
msg: '我是父组件',
msgToChild: '父组件给子组件的数据',
msgFromChild:'还未收到子组件的数据'
}
},
methods: {
fn(value){
//父组件用来接收数据
this.msgFromChild = value
}
},
template: `
<div>
<div>{
{msg}}</div>
<div>{
{msgFromChild}}</div>
<child :tit="msgToChild" @onfn='fn'></child>
</div>`
}
let child = {
data: function () {
return {
msg: '我是子组件',
msgToParent:'子组件给父组件的数据'
}
},
methods: {
//通过某种方式(按需要)触发$emit给父组件传递数据
send(){
this.$emit('onfn',this.msgToParent)
}
},
props: ['tit'],
template: `
<div>
<p>{
{msg}}</p>
<p>{
{tit}}</p>
<button @click='send'>点击给父组件发送数据</button>
</div>`
}
$parent和$children
在子组件中可以通过this.$parent.xxx来获取到父组件的数据，并且是他的亲生父亲。如果某个组件没有父亲，那么this.$parent获取到的是它本身。
在父组件中，可以通过this.$children来获取到它的子组件，但是和parent不同的是，通过this.$children获取到的是一个数组，包括它所有的子组件。为了准确获取到某一个子组件的数据，可以通过设置子组件属性ref,例如<child ref='num1'></child>,在父组件中通过$children.refs.num1.xxx来获取到特定的子组件的数据。
这种方法在组件嵌套多层的时候不太适应。$emit和$on
这种方式不仅适用于父子组件，还适用于其他关系的组件，保证两个接口名称相同，就可以进行数据的发送和接收
var Event = new Vue(); //准备一个空实例对象
//组件一中
Event.$emit('接口名','数据1');
//组件二中
Event.$on('接口名',function('参数'){
//接收到数据1，进行操作
})
- 插槽
父组件使用其他组件的时候，会用到标签的形式。例如，自定义组件com，那么在使用这个组件的时候，是这样的形式<com></com>，那么标签中间就可以放一些数据，通过在子组件中定义插槽slot来接收这些数据。
//组件com1的template
<div>
<slot name = 's1' :msg="数据"></slot>
<p>我是组件com1</p>
<slot name = 's2'><slot>
</div>
//组件com2使用com1，com2的template
<div>
<p>com2自己的一些内容</p>
<com1>
<template #s1="res">
这里也可以获取子组件的数据,例如:res.msg
插入一些数据
</template>
<template #s2>
插入另一些数据
</template>
<com2>
</div>
需要注意的是slot的name和#对应，这种方式不仅可以传递数据，还可以传递html代码。
- vuex
vuex是一个文件，可以在搭建vue项目时使用，用来共享数据。
具体可以查看官方文档