A brief discussion on Vue3 father-son value transfer

From father to son:

1. In the subcomponent tag of the parent component, pass: the data name passed to the subcomponent = "data to be passed"
2. Subcomponents are still received through props and used in templates

Son to Father:

Summarize

From father to son:

1. In the subcomponent tag of the parent component, pass: the data name passed to the subcomponent = "data to be passed"

Here, for your reference, I define the data in the parent component as: fatherData ,

The data that the child component needs to receive is defined as: sonData.

// Parent component <template>
  <div class="about">
    {{fatherData}}
    <!-- From father to son-->
    <!-- 1. In the subcomponent tag of the parent component, pass: the data name passed to the subcomponent = "data to be passed" -->
    <children :sonData="fatherData"></children>
  </div>
</template>
 
<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
  components:{
    children,
  },
name:"about",
setup(){
  const state = reactive({
    fatherData: "hello"
  })
  return {
    ...toRefs(state)
  }
}
 
})
</script>

2. Subcomponents are still received through props and used in templates

In most cases, the data will be passed from the parent component to the child component, and specific functions or request data will be performed based on this data.

In the setup hook, the first parameter props can access the data passed by the parent component. Then in the function, the data is operated through: props. The name of the data passed by the parent component.

The setup function receives props as its first parameter. The props object is responsive (one-way parent -> child). watchEffect or watch will observe and respond to updates to props. Don't destructure the props object, as that will make it less responsive. During development, the props object is immutable to userspace code, and a warning will be triggered when the user attempts to modify props.

// Subcomponent <template>
  <div class="children">
    <!-- 3. Use in subcomponent templates-->
    {{sonData}}
  </div>
</template>
<script>
export default {
name:"Children",
// 2. The subcomponent receives props through props:["sonData"],
  setup(props){
    function childrenbut(){
      // props.sonData can access the data passed by the parent component console.log(props.sonData);
    }
    return {
      childrenbut
    }
  }
}
</script>

Son to Father:

1. The subcomponent triggers the event through the second parameter of setup, context.emit, to achieve child-to-parent transmission

context context object.

// Subcomponent <template>
  <div class="children">
    {{sonData}}
    <!-- 1. Trigger event-->
    <button @click="childrenbut">Child component button</button>
  </div>
</template>
<script>
export default {
name:"Children",
  setup(props,context){
    function childrenbut(){
      console.log(context);
      // 2. Use context.emit to pass data from child to parent. // The first parameter is the method name, and the second parameter is the data to be passed. context.emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

context can also be written in the form of a structure

// Subcomponent <script>
export default {
name:"Children",
  // After passing the structure, write emit directly {emit}
  setup(props,{emit}){
    function childrenbut(){
      // Omit context.emit
      emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

Summarize

In vue3, whether it is parent-to-child or child-to-parent, it is actually the same as in vue2.

The ideas are mostly the same, but the difference is that vue3 needs to call various hooks to pass parameters

You may also be interested in:

Detailed explanation of Vue parent-child component value transfer and one-way data flow issues
Vue parent-child component mutual value transfer and call
Detailed explanation of Vue's seven value transfer methods
Some pitfalls of Vue parent-child component value transfer
Example of passing values between vue child components and parent components
Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation

<<: Clean XHTML syntax

>>: Building a selenium distributed environment based on docker