关于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>