优化了之前的内容，添加了新的组件通信方式，共7种方式，感兴趣的小伙伴可以慢慢积累，总有用得到的时候。
组件是 vue.js 强大的功能，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
根据组件传递数据的方向不同，分为父组件向子组件传值，子组件向父组件传值。
这两种传值方向，是通过props、$ref， $emit，provide和inject，vuex，eventBus，以及 $attrs/ $listeners 来实现的。
<template>
<div class="father">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<!-- 调用子组件 -->
<!-- 当父组件数据填写完成之后，点击提交，调用子组件 -->
<div v-if="show">
<!-- 1.静态传递 -->
<Child password='更改成功'></Child> <!-- 通过自定义属性传递数据 -->
<!-- 2.动态传递 -->
<Child :password='this.ruleForm.checkPass'></Child>
<Child v-bind:password='this.ruleForm.checkPass'></Child>
</div>
</div>
</template>
<script>
// 引入子组件
import Child from './Child';
export default {
data() {
// 对表单提交，进行简单的校验，可忽略
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
// 对表单提交，进行简单的校验，可忽略
return {
// 表单中绑定的数据
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
// 对表单提交，进行简单的校验，可忽略
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
]
},
// 对表单提交，进行简单的校验，可忽略
show: false,
};
},
// 引入子组件
components: {
Child
},
methods: {
// 点击提交，调用方法
submitForm(formName) {
// 对表单提交，进行简单的校验，可忽略
this.$refs[formName].validate((valid) => {
// 对表单提交，进行简单的校验，可忽略
if (valid) {
// 当校验成功时，显示子组件
// console.log('submit!');
this.show = true;
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<template>
<div class="child">
<el-alert
title="新密码:"
type="success">
<span>{{password}}</span>
<!-- 可直接使用从父组件接收的数据 -->
</el-alert>
</div>
</template>
<script>
import Child from './Child';
export default {
data() {
return {
show: false,
password: ''
};
},
props: {
password: String
// 声明一个自定义的属性
},
}
</script>
子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。
methods: {
handleClick () {
// 向父组件传值
this.$emit('getChild', this.message);
}
}
// 调用方法,接收传值
getSuccess (value) {
console.log(value);
this.$message({
message: value,
type: 'success'
});
},
可以定义一个事件来触发响应的$emit，使父组件可以知道有事件改变,进而接收对应的参数。
兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;
原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线。
import Child from './Child';
import Brother from './Borther';
methods: {
handleClick () {
// 向父组件传值
this.$emit('getChild', this.message);
// 兄弟组件传值
Brother.$emit('getChild', this.message);
}
}
兄弟组件接收方式与父组件接收方式一样。
// 调用子组件的方法
this.$refs.child.getMessage(this.detail);
上面三种方式是我们常用的vue通信方式，为什么又添加了现在这些方法呢？因为上面三种是基础，后面的方式是进阶。可以慢慢积累起来。
provide和inject组件传值，适用于有跨度的组件传值，比如祖父组件—>孙子组件，跨级访问的情况给下使用。
单向传值，由provide传递给inject
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
// 父组件
provide() {
return {
message: "this is demo",
};
},
// 孙组件、子组件
inject: ["message"],
关于provide和inject的传参，在实际应用场景中很方便，但是在使用的过程中，因为项目中可能有很多组件需要传参，如果用provide可能会导致我们inject拿到参数的时候，不知道是哪个组件传递的。(仅代表个人研发过程中的观点)
import Vue from "vue";
export default new Vue()
2.注册事件车
在main.js中将事件绑定在vue上
import Vue from "vue";
Vue.prototype.$eventBus = new Vue();
到这一步已经创建好了eventBus事件车了，接下来可以使用了
$emit触发一个事件，自定义一个事件，第二个参数是我们将要传递的数据
this.$eventBus.$emit("myFun", data);
$on接收传递的参数
this.$eventBus.$on("myFun", (data) => {
console.log(data)
// 这个地方可以写接收data后想要执行的方法和操作
});
vuex是状态管理，数据存储，项目需要的话可以使用vuex
$attrs: 包含了父作用域中不被prop所识别的特性绑定，当组件没有声明任何prop时，这里会包含所有的父作用域的绑定，通过v-bind=‘ $attrs’ 传入内部组件，配个interitAttrs选项一起使用
$listeners
$listeners：包含了父作用域中的v-on事件监听器，可以通过v-on=’ $listeners’ 传入内部组件
需要关闭自动性挂在在组件根元素的没有prop声明的属性
interitAttrs: false