1. Value passing between adjacent components (between parent and child)
This is the most basic and direct value-passing relationship between components.
1. The first method is that the parent component passes data to the child component through props , and the child component passes data to the parent component through **$emit , use the v-on** method to receive in the parent component
For example, the following example:
First the parent component:
<template>
<div>这是父组件的div
<son v-bind:something="something">这是子组件的自定义组件</son> // 绑定前者是自定义名称便于子组件调用，后者要传递数据名
</div>
</template>
<script>
import Son from "./son.vue" //这里首先引入子组件
export default {
name: Father,
data() {
return {
something: "good", //这是要传给子组件的数据
}
},
components: {
"son": Son, //这里是在引入子组件后相当于实例化的操作
}
}
</script>
<style>
</style>
and then subcomponents:
<template>
<div>
这是子组件的div
</div>
</template>
<script>
export default {
name: Son,
// 这里首先要写好props
props: {
// props里面就是需要使用的父组件的数据，字段名要和父组件定义的保持一致
something: {
type: String,
required: true,
}
},
data() {
}
}
</script>
<style>
</style>
The above is the parent component to pass the value to the child component, the next is the child component to pass the value to the parent component, there will be more relative operations
This time, let’s look at the child component first:
<template>
<div>
这是子组件的div
<button @click="transfData">点击我触发发送数据</button>
</div>
</template>
<script>
export default {
name: Son,
// 这里首先要写好props
props: {
// props里面就是需要使用的父组件的数据，字段名要和父组件定义的保持一致
something: {
type: String,
required: true,
},
},
data() {
return {
otherthing: "nice", //这个是需要传给父组件的数据
};
},
methods: {
transfData() {
this.$emit("trans", this.otherthing);
},
},
};
</script>
<style>
</style>
Then look at the parent component:
<template>
<div>这是父组件的div
<son
:trans="trans"
> // 采用v-on方式对子组件提交的数据进行绑定，这里的等号前的名字都要和子组件emit() 里面传的第一个值保持一致, 然后等号后是在methods进行处理的方法名
这是子组件的自定义组件</son>
</div>
</template>
<script>
import Son from "./son.vue" //这里首先引入子组件
export default {
name: Father,
data() {
return {
something: "good", //这是要传给子组件的数据
}
},
components: {
"son": Son, //这里是在引入子组件后相当于实例化的操作
},
methods: {
// 这里的方法名同样要和绑定的一致，参数val就是子组件emit() 里面传过来的第二个参数
trans(val) {
console.log(val);
}
}
}
</script>
<style>
</style>
2. The second method is to use ref: if it is used on a normal DOM element, the reference points to the DOM element; if it is used on a sub-component, the reference points to the component instance, and the component instance can be obtained directly after use. Directly call methods of components or access data.
For example, look at the parent component first:
<template>
<div>这是父组件的div
<son
ref="son"
></son>
</div>
</template>
<script>
import Son from "./son.vue" //这里首先引入子组件
export default {
name: Father,
mounted() {
let otherthing = this.$refs.son //这里用ref实例化一个对象
console.log(otherthing.say); //直接用实例化对象调用子组件的属性和方法
console.log(otherthing.transfData);
}
}
</script>
<style>
</style>
Then look at the subcomponents:
<template>
<div>
这是子组件的div
</div>
</template>
<script>
export default {
name: Son,
data() {
return {
say: "nice", //这个是需要传给父组件的数据
};
},
methods: {
transfData() {
console.log("数据传送成功");
},
},
};
</script>
<style>
</style>
This method can only communicate between parent and child components, not across components
2. Data transfer between grandparents and grandchildren components
1. Use the \ $attrs and $listeners methods to transfer values between grandparents and grandchildren.
For example, look at the ancestor components first:
<template>
<div>这是父组件的div
<son
:a="a"
:b="b"
></son>
</div>
</template>
<script>
import Son from "./son.vue" //这里首先引入子组件
export default {
name: Father,
data: {
a: 1,
b: 2,
},
components: {
"son": Son,
}
}
</script>
<style>
</style>
Then look at the subcomponents:
<template>
<div>
<div>{
{
$attrs}}</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$attrs); //{"a":1,"b":2}
}
}
</script>
<style>
</style>
What I understand is that this is a shorthand way of writing props, because $attrs can package all the properties of the parent component v-bind into an object and pass it to itself, so there is no need to write props separately for receiving and instantiating
2. There is another way to use ref writing. This kind of component is mainly applicable between ancestor components and descendant components. No matter how deep the component hierarchy is, it will always take effect when the upstream and downstream relationships are established, but it is not applicable to siblings. Components between components of this indirect relationship.
For example, look at the ancestor component first:
<template>
<div>
这是祖组件的div
<son
ref="son"
></son>
</div>
</template>
<script>
import Son from "./son.vue" //这里首先引入子组件
export default {
inject: ['something'],
mounted () {
console.log(this.something); // good
},
components: {
"son": Son
}
}
</script>
<style>
</style>
Then look at the subcomponents:
<template>
<div>这是子孙组件的div
</div>
</template>
<script>
export default {
provide: {
something: 'good'
}
}
</script>
<style>
</style>
This method is similar to the props used for communication between parent and child components. In the ancestor component, we set a provide attribute and set a value. The purpose is to pass this value to all descendant components, and then the descendant components are injected into the ancestor components through inject Provided value, then the descendant components can use this. property name to directly get the value of the ancestor component.
However, provide and inject are not responsive, except that what is passed is a listenable object, that is to say, if the descendant component accepts and uses the value of the ancestor component, but after the value of the ancestor component changes, the descendant component does not It will change accordingly. If you want to use responsive delivery, the best way is to use Vue.observable to optimize the responsive provide . This has already been explained on the Internet, because I haven't used this high-level usage myself. Here let's not talk
3. Passing values across components or non-direct relationship components
So in the current situation, I generally use vuex to pass values between components that require responsive cross-component value transfer and non-direct relationship. Next, I will talk about the basic methods and steps of using vuex:
first, in the project directory Find the src\sotre directory:
the meanings of several files in the directory are roughly:
state (similar to storing global variable data)
getters (provide methods for obtaining state data)
actions (provide methods for dealing with background interfaces, and call mutations to provide method)
mutations (provide a method for storing and setting state data)
In general, we need to use getters.js, mutations.js and state.js
first define the fields we need to pass in state.js:
export const state = {
something: '', // 定义所要进行传值的字段
}
Then go to mutation.js to set the method of field attribute value:
export const mutations = {
setSomething(state, data) {
state.something = data
}
Finally, go to getter.js to set the method to get the field attribute value:
export const something = (state) => {
return state.something
}
Summary of personal understanding:
Value transfer between father and son: $emit() method or ref binding
Value transfer between grandparents: $attrs() method is more convenient and practical
Cross-component value transfer: vuex is more applicable and more practical