关于javascript:Vue3中组件的通信方式

Props 形式 (父往子)

父组件

<script setup lang="ts">
    // 引入组件
    import Text from '../components/text.vue'
    // 定义的数据
    const list = '父组件数据'
</script>
<template>
    <div>
        <Text :list='list'></Text>
    </div>
</template>

子组件

<script lang='ts' setup>
    // 导入 defineProps
    import {defineProps} from 'vue'
   // 通过 props 接管父组件接管的参数
    const props = defineProps(['list'])
    console.log(props.list);
</script>
<template>
    <div>
        {{props.list}}
    </div>
</template>

在 <script setup> 中必须应用 defineProps API 来申明 props，它具备残缺的推断并且在 <script setup> 中是间接可用的。

emit 形式 (子往父)

子组件

<script lang='ts' setup>
import {defineEmits} from "vue";
    // 注册一个自定义事件名, 向上传递时通知父组件要触发的事件
   const emit = defineEmits(['em'])
   const btn = () =>{
    // 参数 1: 事件名
    // 参数 2: 传给父组件的值
    emit('em','子组件')
   }
</script>
<template>
    <div>
      <button @click="btn"> 子组件按钮 </button>
    </div>
</template>

父组件

<script setup lang="ts">
   import {ref} from 'vue'
   import Text from '../components/text.vue'
   let message = ref('父组件')
   // 更改 message 的值, data 是从子组件传过来的
   const em = (em) =>{console.log(em);
    message.value = em
   }
</script>
<template>
    <div>
        <p> 父组件:{{message}} </p>
       <Text @em='em'></Text>
    </div>
</template>