1. Props + $ emit
is suitable for use by parent-child components and child components;
props receives data from the parent component and is bound by the parent component. v-on: event name listens for events, and child components use this.$emit('event name') to dispatch events. ;
Disadvantage: It will be more troublesome if the components are nested deeply;
// Parent.vue
<div class="parent">
<Child :num="num" @addNum="handleAddNumber"></Child>
</div>
<script>
import Child from './Child.vue'
export default {
name: 'parent',
components: {
Child
},
data() {
return {
num: 1
}
},
methods: {
handleAddNumber(n) {
this.num += n
}
}
}
</script>
// Child.vue 组件
<div class="child">
<div @click="increamentNum">{
{
num}}</div>
</div>
<script>
export default {
name: 'child',
methods: {
increamentNum() {
this.$emit('addNum', 3)
}
}
}
</script>
2. .sync modifier
When a child component changes a prop, this change will also be synchronized to the binding in the parent component. This is somewhat similar to the function of v-model;
.sync.prop="newProp" is the syntactic sugar of :prop and @update:prop="val => newProp = val". When prop changes, an update event will be triggered ( this.$emit('update:prop', newValue))
// parent.vue
<div>
<p>{
{
num}}</p>
<Child :n.sync="num"></Child>
</div>
export default{
name: 'parent',
data(){
return {
num: 1111
}
}
}
// child.vue
<div>
<p>{
{
n}}</p>
<button @click="addN">n + 1</button>
</div>
export default{
props: {
n: Number
},
methods: {
addN() {
this.n += 1
this.$emit('update:n', this.n)
}
}
}
3. vuex: State Manager
Advantages: Responsive, can manage all shared states in the project;
Disadvantages: Suitable for large and complex state management, if it is too small, it will be a bit redundant;
// main.js 入口文件
import Vue from 'vue'
import App from './App.vue'
import store from './store.js'
new Vue({
el: '#app',
store,
render: h => h(App)
})
// store.js
import Vuex from 'vuex'
export const store = new Vuex.Store({
state: {
num: 1,
userArr: [{
id: 1}, {
id: 2}]
},
getters: {
a: (state, getters) => {
return state.num + 'aaa'
},
userId: (state) => (id) => {
return state.userArr.find(item.id === id)
}
},
mutions: {
ADD_NUM(state, payload) {
// payload 为传递进来的数据 ,可以通过 this.$store.commit('add', {
n: 10 }) 触发该 mutions
state.num = state.num + payload.n
}
},
actions: {
addNum({
commit, dsipatch}, payload) {
// payload 为传递进来的数据 ,可以通过 this.$store.dispatch('addNum') 调用该 action
commit('ADD_NUM', {
n: 10 })
}
},
modules: {
aaa: {
state: {
},
getters: {
},
mutions: {
},
actions: {
}
},
bb: {
state: {
},
getters: {
},
mutions: {
},
actions: {
}
}
}
})
4. Inject & provide
is suitable for components with ancestor relationships;
add the inject attribute in the descendant component to receive data, which can be a string array or an object;
use the provide attribute in the ancestor component to store the data to be transferred ;
Advantages: Ancestor components do not need to know which descendants use these properties, and descendant components do not need to know which ancestor the properties come from;
Disadvantages: Because the source of the properties is not known, it is difficult to track and subsequent maintenance is difficult; properties is non-responsive;
// 祖先组件
<div>
<Child></Child>
</div>
export default {
name: 'grandParent',
data() {
return {
name: 'bob',
age: 11,
num: 20
}
},
provide(){
return {
name: this.name,
age: this.age,
n: this.num
}
}
}
// 后代组件
<div>
{
{
name}} {
{
age}} {
{
n}}
</div>
export default{
name: 'child',
inject: ['name', 'age', 'n']
}
5. $ root $ parent $ children $ refs
access the root instance new Vue() through $ root;
access the instance of the parent component through $ parent;
access the direct child components of the current component through $ children. Note that the obtained sub-components are not in order and are not responsive;
access the instance of the specified ref attribute through $ refs: this.$ refs['tree'] can obtain < tag name/component name ref="tree" >...</ tag name /component name>. $refs can be used after the component is rendered and is not responsive;
6. The event bus event bus (used more in the vue1
. communication between unrelated components). non-responsive
eventBus.js 文件
import Vue from 'vue'
export const eventBus = new Vue()
user.vue 组件
import eventBus from 'eventBus.js'
// 派发事件
eventBus.$emit('close', false)
role.vue 组件
import eventBus from 'eventBus.js'
// 监听事件
eventBus.$on('close', isTrue => {
console.log(isTrue)
})