vue3 插槽父传子、子传父

Lucky_zss

于 2024-05-08 14:34:26 发布

阅读量402

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/zss_base/article/details/138571126

//子组件

<template>
  <div>
    <div ref="chart" style="width: 600px; height: 400px"></div>
    <button @click="parents">点击</button>
    <!-- 插槽 -->
      <slot name="child">子组件插槽</slot>
      <!-- 插槽中 子传父 -->
      <slot :data="{text:'999'}"></slot>
  </div>
</template>



//父组件

 <template #child>
        <p>111223</p>
      </template>
      <template #default="{data}">
        <div>{{ data.text }}</div>
      </template>