Component communication mode

1. Component communication

adopt prop signal communication （ Father to son ）

Subcomponents props Option to receive data from the parent component . you 're right , Only receive ,props Is one-way bound , That is, only the parent component can pass... To the child component , Can't reverse . And there are two ways of transmission ：

（1） Static transfer
Subcomponent pass props Option to declare a custom property , Then the parent component can nest the tags , Through this attribute, data is passed to the sub component .

 <!--  Parent component  -->
<template>
  <div>
    <h1> I am the parent component ！</h1>
    <child message=" I am sub component one ！"></child>  // Pass data through custom attributes 
  </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
  components: {
    Child},
}
</script>

 <!--  Child components  -->

<template>
  <h3>{
    {
    message}}</h3>
</template>
<script>
  export default {
    
    props: ['message']   // Declare a custom attribute 
  }
</script>

（2） Dynamic delivery
We already know that we can give... As above props Pass in a static value , But we need more dynamic data . It can be used at this time v-bind To achieve . adopt v-bind binding props Custom properties of , What you pass is not a static string , It can be an expression 、 Boolean value 、 Objects and so on, any type of value .

 <!--  Parent component  -->

<template>
  <div>
    <h1> I am the parent component ！</h1>
    <child message=" I am sub component one ！"></child> 

    <!--  This is a  JavaScript  Expression instead of a string .-->
    <child v-bind:message="a+b"></child>

    <!--  Dynamic assignment with a variable .-->
    <child v-bind:message="msg"></child>
  </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
  components: {
    Child},
  data() {
    
    return {
    
      a:' I'm subcomponent two ！',
      b:112233,
      msg: ' I'm sub component three ！'+ Math.random()
    }
  }
}
</script>

 <!--  Child components  -->

<template>
  <h3>{
    {
    message}}</h3>
</template>
<script>
  export default {
    
    props: ['message']
  }
</script>

adopt ref signal communication （ Father to son ）

ref Is used to register reference information for elements or subcomponents . The reference information will be registered in the $refs On the object .
$refs It's an object , Hold the registration ref attribute All of the DOM Element and component instances .

If ref Used on subcomponents , Points to component instances , It can be understood as the index of the sub components , adopt $ref It is possible to get the properties and methods defined in the subcomponents .
If ref In ordinary DOM Use on element , The reference points to DOM Elements , adopt $ref It is possible to obtain the DOM Property collection for , Easy access to DOM Elements .

 <!--  Parent component  -->

<template>
  <div>
    <h1> I am the parent component ！</h1>
    <child ref="msg"></child>
  </div>
</template>

<script>
  import Child from '../components/child.vue'
  export default {
    
    components: {
    Child},
    mounted: function () {
    
      console.log( this.$refs.msg);
      this.$refs.msg.setMessage(' I am sub component one ！')
    }
  }
</script>

 <!--  Child components  -->

<template>
  <h3>{
    {
    message}}</h3>
</template>
<script>
  export default {
    
    data(){
    
      return{
    
        message:''
      }
    },
    methods:{
    
      setMessage(m){
    
        this.message=m;
      }
    }
  }
</script>

From the code above, we can see that , adopt ref=‘msg’ Sub components can be child Refer to $ref, And through .msg.setMessage（） Call to subcomponent setMessage Method , Pass parameters to subcomponents . The parent component changes the value of the child component by calling the method of the child component

Be careful ：

1. prop Focus on data transfer , It does not call the properties and methods in the subcomponents . Like when creating article components , Custom use scenarios like titles and content , Most suitable for use prop.
2. $ref Focus on indexing , It is mainly used to call properties and methods in sub components , It's not really good at data transfer . and ref Use in dom When the elements , Can make the function of selector , This function is more useful than as an index .

adopt $emit （ Son to father ）

Use... Through subcomponents ￥emit Define custom events event And pass the parameters , When this statement is executed to , The parameters will be arg Pass to the parent component , Parent component passed @event Monitor and receive parameters . If the event handler is a method, it will be used as the first parameter , Otherwise you can use $event obtain .

<blog-post @enlarge-text="postFontSize += $event"></blog-post>