Vue2- und vue3-Eltern-Kind-Komponentenparameterübergabe und -unterschied

Ansicht 3

1. Von der übergeordneten Komponente zur untergeordneten Komponente

Definieren Sie eine Eigenschaft im Tag der untergeordneten Komponente der übergeordneten Komponente und verwenden Sie defineProps in der untergeordneten Komponente, um den Wert von der übergeordneten Komponente zu empfangen

übergeordnete Komponente

<template>
<div>
  <sonOne msg="我是父组件的msg" @get-child-data="getChildData"></sonOne>
<!-- <p>{
    
    {
    
    num1}}</p>-->
</div>
</template>

<script setup lang="ts">
import {
    
    ref,onMounted} from  'vue'
import sonOne from '@/components/sonOne.vue'

// var num1 =ref('')
// // 接收
// const getChildData = (data) => {
    
    
//   console.log(data.value);
//   num1.value = data.value
// }
</script>

<style scoped>

</style>

Unterbaugruppe

<template>
<div>
<p>我是父组件传过来的：{
    
    {
    
    msg}}</p>
<!--  <button @click="sendData">传递数据给父组件</button>-->
</div>
</template>

<script setup lang="ts">
import {
    
    ref} from 'vue'
defineProps<{
    
    
  msg
}>()

// const num = ref(123)
// const emits = defineEmits()
// emits('getChildData', num)

</script>

<style scoped>

</style>

1. Untergeordnete Komponenten werden an übergeordnete Komponenten übergeben

Definieren Sie ein benutzerdefiniertes Ereignis im Tag der untergeordneten Komponente der übergeordneten Komponente, verwenden Sie das benutzerdefinierte Ereignis, um die Parameter von der untergeordneten Komponente zu empfangen, und verwenden Sie defineEmits in der untergeordneten Komponente, um Parameter an die übergeordnete Komponente zu übergeben

übergeordnete Komponente

<template>
<div>
  <sonOne msg="我是父组件的msg" @get-child-data="getChildData"></sonOne>
 <p>{
    
    {
    
    num1}}</p>
</div>
</template>

<script setup lang="ts">
import {
    
    ref,onMounted} from  'vue'
import sonOne from '@/components/sonOne.vue'

var num1 =ref('')
// 接收从子组件传来的参数
const getChildData = (data) => {
    
    
  console.log(data.value);
  num1.value = data.value
}
</script>

<style scoped>

</style>

Unterbaugruppe

<template>
<div>
<p>我是父组件传过来的：{
    
    {
    
    msg}}</p>

</div>
</template>

<script setup lang="ts">
import {
    
    ref} from 'vue'
defineProps<{
    
    
  msg
}>()

const num = ref(123)
// 子传父
const emits = defineEmits()
emits('getChildData', num)

</script>

<style scoped>

</style>

Ansicht2

Von der übergeordneten Komponente zur untergeordneten Komponente

<div id='app'>
        <!-- 父传子需要在父组件中的子组件中定义一个变量 -->
        <son :type="father"></son>
    </div>

    <template id="son">
        <div>
            {
    
    {
    
    type}}
        </div>
    </template>

    <script>
        // 子组件
        Vue.component('son',{
    
    
        template:'#son',
        // 在子组件中需要用props接收父组件的值
        props:{
    
    
            type:[String,Number]
        },
    })
    // 父组件
    const vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            father:'父组件传给子组件的值'
        },
        methods: {
    
               
        }
    })
    </script>

Untergeordnete Komponente zur übergeordneten Komponente

<div id='app'>
        <!-- 子传父需要在父组件中的子组件中定义一个自定义事件 -->
        <son @getson="getson"></son>
        <h2>{
    
    {
    
    msg}}</h2>
    </div>
    <template id="son">
    </template>
    <script>
        // 子组件
        Vue.component('son',{
    
    
            template:'#son',
            data(){
    
    
                return {
    
    
                    msg:'子传过来的值'
                }
            },
            created(){
    
    
                // 在子组件中用this.$emit传递参数   this.$emit(第一个参数 自定义事件的名字,第二个参数  传递的值) 
                this.$emit('getson',this.msg)
            }
        })

        // 父组件
    const vm = new Vue({
    
    
        el: '#app',
        data: {
    
    
            msg:''
        },
        methods: {
    
    
            // 自定义的事件名函数接收子传过来的值
            getson(data){
    
    
                this.msg = data
            }
        }
    })
    </script>

vue2和vue3父子组件传参的区别：

Vom Vater zum Sohn:

In vue2 sendet die übergeordnete Komponente an die untergeordnete Komponente, die übergeordnete Komponente sendet über benutzerdefinierte Attribute und die untergeordnete Komponente empfängt über props.
Der Unterschied zu vue3 besteht darin, dass die übergeordnete Komponente nach der Einführung in die untergeordnete Komponente direkt und ohne Registrierung verwendet werden kann und die untergeordnete Komponente definePropssie über die Methode empfängt

Kindsvater:

In vue2 wird die untergeordnete Komponente an die übergeordnete Komponente übergeben, die untergeordnete Komponente $emitwird durchgesendet und die übergeordnete Komponente wird über ein benutzerdefiniertes Ereignis empfangen.
Der Unterschied zu vue3 besteht darin, dass die untergeordnete Komponente nach der Einführung in die übergeordnete Komponente direkt und ohne Registrierung verwendet werden kann und defineEmitsüber die Methode in der untergeordneten Komponente gesendet wird.