Ref communicates with parent/children
Ref calls the child component method and passes the parameter
In the parent component code, the child component object can be retrieved in this.$ref by setting the attribute ref on the label of the child component, and then variables and methods in the child component can be invoked to trigger changes in the child component
The parent calls the child through ref
Parent component code
<! -- Parent component --><template>
<div class="family">
<div @click="father_methods">
<div>Local arguments to the parent component :{{father_string}}</div>
<button @click="change_son">Ref gets the child component instance and fires its function</button>
</div>
<! -- Subcomponent -->
<Son ref="child1"></Son>
<! -- Subcomponent -->
</div>
</template>
<script>
import Son from "./Son";
export default {
name: "HelloWorld",
data () {
return {
father_string: "father_string"}; },components: {
Son,
},
methods: {
// Parent component method
father_methods (str) {
this.father_string = str
},
// Change_son calls child component internal methods and parameters
change_son () {
this.$refs.child1.son_methods('changed_from_father')}}};</script>
Copy the code
Subcomponent code
<! -- Subcomponent --><template>
<div>
<div>Local arguments to child components {{son_string}}</div>
</div>
</template>
<script>
export default {
name: "Son",
data () {
return {
son_string: "son_string"}},methods: {
/* This method is then called by the parent component */
son_methods (str) {
this.son_string = str
}
}
};
</script>
Copy the code
Ref call effect
Click the button of the parent component, trigger change_son, trigger son_methods of the child component and pass the parameters to the child component, as shown in the picture
In Vue2, there is not much difference between this.$children and this.$refs calls in the parent component
Note that Vue3 removes the $children attribute from this
$parent = $parent = $parent = $parent = $parent
<script>
export default {
/* Subcomponent */
name: "Son",
data () {
return {
son_string: "son_string"}},methods: {
/* This method is then called by the parent component */
son_methods (str) {
this.son_string = str
}
},
mounted () {
// Print to see the parent component instance
console.log(this.$parent)
}
};
</script>
Copy the code
By printing in the background, we can see that the object holds the variables and parameters of the parent component
The child goes through the parent method
We directly call the parent component’s methods and pass parameters in the middle of the child component’s mounted life
mounted () {
/* Mounted */
this.$parent.father_methods('changed_by_son')}Copy the code
On the left side of the figure, the parameters of the parent component are indeed modified for the quilt component
conclusion
Through ref and parent/parent /parent /children, you can get the parent component instances and access them easily and quickly, call their methods and parameters, according to the actual situation, and cooperate with other communication methods to develop gracefully, efficiently and happily ~