Think no style the text style not accustomed to using, synchronous update into their own language, to the https://www.yuque.com/diracke…
1. The parent component passes the attribute value to the child component (child component props to receive). The child component $emit triggers the event to carry the parameters, and the parent component receives the parameters passed by the child component through the callback function of the triggered event binding. Parent-> child attribute value passing. // Father. Vue
Child -> parent child $emit emit event, carry parameters, parent receives event parameters. // Children. Vue
<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"]}}
2. Use V-Model for custom components (2.2.0+ new)
The default vue v-model is often found on the input tag, and the v-model is essentially syntactic sugar.
<template>
<input v-model=”message”></input>
<! The v-model above is short for the following :value and @input –>
<input :value=”message” @input=”handleChange”></input>
</template>
<script>
methods: {
handleChange(e) {
this.message = e.target.value;
}
}
</script>
For the above input, v-model is short for the value property and the input event. For raido, select, checkbox, and so on, the v-model has corresponding properties and events.
The image above is from the website.https://cn.vuejs.org/v2/guide…
If you want a custom component to support the V-Model, you need to configure a Model object for the custom component. // Children. Vue
// Father. Vue
v-model supports the passing of only one property. If a custom component wants to support multiple properties, it can use the following method: (. Sync)
Sync =”doc.title”>
// Children. Vue
<script>
data() {
return {
curImgList:[]
}
}
</script>
4. Vuex is very common, don’t say.
5, Vue built-in high-level attribute provide/inject (not recommended for business development)
// ChildrenA.vue
<script>
data() {
return {
Color: “skyblue”,
FontSize: “20 px”
}
},
provide() {
return {
theme: {FontSize: this.fontSize,}},}
// 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 {the from: “theme”, / / avoid the nuptial default: () = > ({})}} < / script >
Provide and Inject are officially recommended for high-level plug-in/component library development and are not recommended for use directly in application code. Business development prioritised Vuex for state management because Provide Inject has a bubbling-like feature that the data source is likely to be “broken” in the middle, even by components in the component library, or provide the ancestor elements in the component library are broken, which is not conducive to maintenance.
EventBus uses two methods: $emit to send messages and $on to receive messages
// send message EventBus.$emit(channel: string, callback(payload1…)) $on(channel: string, callback(payLoad1…)) )
// event-bus.js import Vue from ‘Vue’ export const eventBus = new Vue()
// A.vue
<template>
<button @click=”sendMsg()”>-</button>
</template>
// B.vue
<template>
<p>{{msg}}</p>
</template>
// main.js vue.prototype.$eventBus = new Vue()
$emit(‘nameOfEvent’, PayLoadData); $emit(‘nameOfEvent’, PayLoadData); this.$eventBus.$on(‘nameOfEvent’, callback(payloadData));