思否上文本样式用不习惯，同步更新到自己的语雀，可以移步
https://www.yuque.com/diracke...
1、父组件通过属性值传递给子组件（子组件props接收），子组件$emit触发事件同时携带参数，父组件通过触发的事件绑定的回调函数传参接收子组件传递的参数。
父->子 属性值传递。
// Father.vue
<div>
<children fill-color=”#ABC” />
</div>
子->父 子组件$emit触发事件，携带参数，父组件接收事件参数。
// Children.vue
<template>
<div>
<button @click=”eventExample”></button>
</div>
</template>
<script>
methods: {
eventExample(){
this.$emit("successUpload", [“1.jpg”, “2.jpg”]);
}
}
</script>
// Father.vue
<template>
<div>
<children @successUpload=”uploadImg” />
</div>
</template>
<script>
methods: {
uploadImg(val) {
this.formData.imageList = val;
// console.log(val); // [“1.jpg”, “2.jpg”]
}}
</script>
注意：属性的名字如果用短横线连接，传入子组件后props里的变量名自动变为小驼峰形式。
2、自定义组件使用v-model （2.2.0+ 新增）
vue默认的v-model常见于input标签上，v-model的本质也是语法糖。
<template>
<input v-model="message"></input>
<!-- 上面的v-model 就是下面:value和@input的简写 -->
<input :value="message" @input="handleChange"></input>
</template>
<script>
methods: {
handleChange(e) {
this.message = e.target.value;
}
}
</script>
对上面的input，v-model是value属性和input事件的简写。对raido、select、checkbox等，v-model都有对应的属性和事件。
上图来自官网 https://cn.vuejs.org/v2/guide...
如果需要自定义组件支持v-model，需要为自定义组件配置一个model对象。
// Children.vue
<template>
<div>
<button @click=”eventExample”></button>
</div>
</template>
<script>
model: {
prop: "uploadImg",
event: "imgListChange"
},
props: {
uploadImg: {
type: Array,
default: []
},
}
methods: {
eventExample(){
this.$emit("imgListChange", [...this.newList]);
}
}
</script>
// Father.vue
<template>
<div>
<children v-model=”curImgList” />
</div>
</template>
<script>
data() {
return {
curImgList:[]
}
}
</script>
v-model只支持一个属性的传递，如果自定义的组件想要同时支持多个属性的双向绑定，那么可以用下面一种方式。 （.sync）
3、.sync修饰符 （2.3.0+ 新增）
.sync修饰符也是语法糖
<text-document :title.sync="doc.title"></text-document>
<!-- 上面的:title.sync 就是下面:title和@update:title的简写 -->
<text-document :title="doc.title" @update:title="doc.title = $event" ></text-document>
这种写法需要在子组件中$emit(“update:title”，value)来传值。
// Children.vue
<template>
<div>
<button @click=”eventExample”></button>
</div>
</template>
<script>
props: {
uploadImg: {
type: Array,
default: []
},
}
methods: {
eventExample(){
this.$emit("updata:imgList", [...this.newList]);
}
}
</script>
// Father.vue
<template>
<div>
<children :upload-img.sync=”curImgList” />
</div>
</template>
<script>
data() {
return {
curImgList:[]
}
}
</script>
4、vuex
这个很常见，不说。
5、vue内置的高级属性 provide / inject （业务开发不推荐）
// ChildrenA.vue
<script>
data() {
return {
color: “skyblue”,
fontSize: “20px”
}
},
provide() {
return {
theme: {color: this.color, // 这种写法this.color不是响应式
fontSize: this.fontSize,
}
},
}
</script>
// ChildrenE.vue
<template>
<div>
<h3 :style="{ color: theme.color }">E </h3>
</div>
</template>
<script>
data() {
return {
}
},
inject() {
theme {
default: () => ({})
}
}
</script>
// ChildrenE.vue
<template>
<div>
<h3 :style="{ color: theme.color }">E </h3>
</div>
</template>
<script>
data() {
return {
}
},
inject() {
theme1 {
from: “theme”, // 避免重名
default: () => ({})
}
}
</script>
官方建议将provide 和 inject用于高阶插件/组件库开发，并不推荐直接用于应用程序代码中。
业务开发优先考虑用vuex管理状态， 因为provide inject 会有一个类似冒泡的特性，数据源有可能在中间被“打断”，甚至是有可能被组件库中的组件打断，或者打断组件库中祖先元素的provide，不利于维护。
6、eventBus
主要用到两个方法，$emit发送消息，$on接收消息
// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))
eventBus非全局使用
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
// A.vue
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '来自A页面的消息');
}
}
};
</script>
// B.vue
<template>
<p>{{msg}}</p>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
data(){
return {
msg: undefined
}
},
mounted() {
EventBus.$on("aMsg", (msg) => {
// A发送来的消息
this.msg = msg;
});
}
};
</script>
全局使用
// main.js
Vue.prototype.$eventBus = new Vue()
任意组件的方法中通过
this.$eventBus.$emit('nameOfEvent', payloadData);
this.$eventBus.$on('nameOfEvent', callback(payloadData));