How to communicate between parent and child components?

The parent component imports the child component through import and registers it in the parent component through the component attribute. Then the child component can be embedded into the parent component in the form of label.

Communication through props

The child component can receive data from the parent component through the props option. Props is one-way binding, that is, only the parent component can transfer data to the child component, not the reverse. There are also two delivery methods:

1. Static transfer: the subcomponent declares a custom attribute through props, but this attribute is static and cannot be changed. Usually used to pass strings.

2. Dynamic transfer: bind props user-defined attributes through v-bind, and the transfer can be an expression, Boolean value, object, etc.

//Parent component
<template>
  <div class="item">
    <TodoItem :msg="a+b"></TodoItem>
    <TodoItem v-bind:msg="msg"></TodoItem>
  </div>
</template>
<script>
  import TodoItem from "./components/TodoItem";
  export default{
    components:{
      TodoItem
    },
    data(){
      return {
        a:'I am component 1',
        b:'I'm component 2',
        msg:'I'm a component'+Math.random()
      }
    }
  }
</script>

<style scoped>
  .item{
    margin: 20px auto 20px 20px;
  }
</style>

//Subcomponents
<template>
  <div>
      <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  props:['msg']
}
</script>

Communicate via $ref

The official explanation for ref is that ref is used to register reference information for elements or subcomponents. The reference information will be registered on the $refs object of the parent component.

These may be more abstract. In short, they are:

1. When ref acts on a sub component, it points to the instance of the sub component. It is possible to obtain the properties and methods defined in the sub component through $refs

2. When ref acts on a DOM element, it points to the DOM element. Through $refs, you can get the attribute collection of the DOM and easily access the DOM element. Its function is similar to that of JQ selector.

//Parent component
<template>
  <div class="item">
    <TodoItem ref="msg"></TodoItem>
    <p ref="dom"></p>
  </div>
</template>
<script>
  import TodoItem from "./components/TodoItem.vue";
  export default{
    components:{
      TodoItem
    },
    mounted() {
      console.log(this.$refs)
      this.$refs.msg.getmsg("I am fw");
      this.$refs.dom.innerHTML="I'm an ordinary element";
    }
  }
</script>

<style scoped>
  .item{
    margin: 20px auto 20px 20px;
  }
</style>

//Subcomponents
<template>
  <div>
      <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  data(){
    return{
      msg:''
    }
  },
  methods:{
    getmsg(s){
        this.msg=s;
    }
  }
}
</script>

[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-jsolpqoq-164638655537) (image / image_1. PNG "")]

Communication via $emit

props and ref are mainly used to communicate from parent component to child component, while $emit is mainly used to communicate from child component to parent component.

vm.$emit(event,arg)

$emit binds a custom event. When this statement is executed, it will pass the parameter arg to the parent component, which will listen and receive the parameters through @ event.

//Parent component
<template>
  <div class="item">
    <TodoItem @getMsg="showMsg"></TodoItem>
    {{title}}
  </div>
</template>
<script>
  import TodoItem from "./components/HelloWorld.vue";
  export default{
    components:{
      TodoItem
    },
    data(){
      return{
        title:''
      }
    },
    methods:{
      showMsg(title){
        this.title=title;
      }
    }
  }
</script>

<style scoped>
  .item{
    margin: 20px auto 20px 20px;
  }
</style>

//Subcomponents
<template>
  <div>
      <p>Subcomponents</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('getMsg','I came from the subassembly')
  }
}
</script>

Difference between props and $ref:

Props focuses on data transmission, and it cannot call the properties and methods of sub components. Custom title and content are suitable for props

Ref focuses on indexing and is mainly used to call properties and methods in sub components. In fact, it is not good at data transmission. When using this selector, ref is more useful than the DOM element.

If you have any comments or suggestions, I hope you can communicate more in the comment area. Thank you 😊