Parent components pass data

  1. The parent component passes data to the child, via V-bind
/ / the parent component
<template>
  <div>
    <! Even for static values, you must use V-bind to tell Vue that it is an expression and not a string -->
    <child title="Static value" v-bind:age="42" :is-public="false" :list="[3] 234123342" :love="like"></child>
  </div>
</template>
<script>
export default {
  data() {
    return {
     like: {sport:"basketball"}}}},</script>
Copy the code

The child component gets the values passed by the parent component through props

/ / child component
/ / child component
<template>
  <div>
    
  </div>
</template>
<script>
export default {
   props: {title: {type:String.required: true  // Verify the required field
      },
      age: {type:Number.default:0
      }
      list: {type:Array.default:() = >([])  // Omit the braces and return an array of literals directly
      }
      love: {type:Object.default:function () {
          return{}}}}data() {
   
    return{}}},</script>
Copy the code
  1. The child component changes the value passed by the parent component through the.sync property. This is a syntactic sugar that enables the child component to call the update method to update the parent component’s data

* Before we say sync, the vue. Sync modifier used to exist in Vue 1.0, but it was removed in vue 2.0. However, in practical applications since the 2.0 release, we have found.sync to be useful, for example in developing reusable component libraries. All we need to do is make it easier to distinguish code that changes the state of a parent component from a child component. Since 2.3.0 we have reintroduced the.sync modifier, but this time it only exists as a compile-time syntactic sugar. It will be extended to an * that automatically updates the parent component’s properties

Method of use

The parent component

 The sync property tells the child component to allow it to modify
<child :msg.sync='n'></child>
/ / is equivalent to
<child :msg="n" @update:msg="val=>n=val"></child>
Copy the code

Child components

// With the sync modifier key, the child component must modify the data passed by the parent component via the update: props name
<button @click="$emit("update:msg",msg-1)"></button>
Copy the code

The parent component calls the method

  1. The child modifies the parent’s data by calling the parent’s methods
this.$emit(parentMethod,event)
// get the parent component directly from $parent
this.$parent.parentMethod(event)
// The parent component passes methods to the child component
Copy the code
  1. A parent component calls a child component’s method

this.$refs.refname.methodName()

For example

// There is a method in the child componentMethod: {toggle(){
    console.log("""")}}/ / the parent component
<template>
  <div>
  <child ref="child"></child>
  <button @click="fatheMethod"></button>
  </div>
</template>
<script>
export default {
  data() {
    return{}},methods: {
    fatherMethod(){
     this.$refs.child.toggle()
    }
  },
}
</script>
Copy the code