这是我参与「第四届青训营 」笔记创作活动的第11天。
以下是学习vue时的一些笔记，包括props属性、全局事件总线。
Vue中的props——向子组件传递数据
什么是props
prop，翻译为属性，props则是属性的复数，props是Vue组件中的一个属性，可以用来动态传递和修改数据
props如何使用(三种用法,一般使用第一种)
1.数组型，只声明要进行传递的属性
props:["name","sex","age"]
2.对象型，声明要传递的属性以及限制传递值的类型
props:{
name:String,
sex:String,
age:Number
}
3.属性对象型，声明要传递的属性，限制传递值的类型，以及属性的必要性和属性的缺省值等等
props:{
name:{
type:String,
require:true //属性必要性：true表示属性必须进行传递
},
sex:{
type:String,
require:true,
default:'未知'
},
age:{
type:Number,
default:18
}
}
使用props需要注意的事项：
1.需要用组件标签来传递属性，像这样：
<School name="异类小魔鬼" sex="男" age="18"></School>
2.使用v-bind去传输数字，不然会传成字符串，造成输出错误
<School name="异类小魔鬼" sex="男" :age="18"></School>
3.想要操作props传入属性的值，可以在data中创建一个新属性，将传入属性的值赋值给新属性，并用方法(methods)对其进行操作，如下
<template>
<div>
<h2>学生姓名：{{ name }}</h2>
<h2>学生性别：{{ sex }}</h2>
<h2>学生年龄：{{ myAge }}</h2>
<button @click="addNumber">点我+1</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
//data内的值最终会被props覆盖掉
// name: "异类小魔鬼",
// sex: "男",
// age: 18,
// 如果想要对props传进来的值进行操作，可以这样
myAge: this.age,
//然后利用方法对其进行操作
};
},
methods: {
addNumber() {
this.myAge++;
},
},
props: ["name", "age", "sex"],
};
</script>
4.如果data中有与props中重名的属性，在页面上呈现时，data中的属性会被props中的属性覆盖掉
5.props内的属性尽量和组件标签传进来的属性一一对应，不多，也不少
6.使用props不可使用关键字，比如ref，key等等已经被命名好的标签属性
全局事件总线
什么是全局事件总线：
像如上的图片，通过建立一个中转站X并将所有的事件放在中转站中，这样将可以将各个组件连接起来，连成一个总线，因为该总线是关于事件的，全局的，所以称为全局事件总线。
建立全局事件总线
1.由于所有的组件都要访问到X中转站，所以，我们可以在VC实例对象上创建中转站，也可以在Vue实例对象上创建中转站。
在VC实例对象上创建中转站：
//通过VC实例对象创建全局中转站的步骤
const Demo = Vue.extend({});
const d = new Demo();
Vue.prototype.x = d;
在Vue实例对象上创建中转站：
//创建Vue实例对象
new Vue({
el: '#app',
render: h => h(App),
//这样做的好处是：
// 1.节省代码
// 2.创建方便
//但是一般不写成x，要写为$bus
beforeCreate() {
Vue.prototype.$bus = this;
}
})
这里，一般将中转站命名为$bus
2.在组件中将事件添加到中转站中
mounted() {
console.log("School", this);
this.$bus.$on("hello", (data) => {
console.log("我是School组件，收到了数据", data);
});
},
上面的代码在中转站$bus上添加一个自定义事件hello；
3.通过中转站，在组件中使用自定义事件
methods: {
sendStudentName() {
this.$bus.$emit("hello", "张三");
},
},
通过点击事件等调用中转站$bus上的自定义事件
全局事件总线的好处
1.可以进行父组件向子组件，子组件向父组件以及兄弟组件之间的信息传递，实现任意组件间通信
注意
在组件销毁之前，我们要将该组件绑定在中转站中的事件解绑，以免引起不必要的错误，比如命名重复等等，代码如下：
beforeDestroy() {
//用完销毁
this.$bus.$off("hello");
},
