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