13.v3+ts的父子组件传值

最新推荐文章于 2024-01-18 11:20:38 发布

道长道长IOT

最新推荐文章于 2024-01-18 11:20:38 发布

阅读量168

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_56986233/article/details/133916505

版权

1.0父传子

1.1父组件传值

<template>
  <div class="container">
    <Head title="我不知道怎么说" :arr="[1,2,3]"></Head>
    <Foot></Foot>
    <Content></Content>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import Head from './components/head.vue'
import Foot from './components/footer.vue'
import Content from './components/content.vue'

1.2子组件接收

<template>
  <div class="container">
    头部:{{ title }}
    <ul>
      <li v-for="item in arr">2</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
// 不需要默认值的时候
// const props = defineProps<{
//   title: string;
//   arr: number[];
// }>();
// console.log(props.title);
// console.log(props.arr);

type arrs = number | string

// 需要默认值
withDefaults(
  defineProps<{
    title: string;
    arr: arrs[];
  }>(),
  {
    // 当父组件没有传递的时候，默认展示[2,2]
    arr:()=>['2',2]
  }
);


</script>

2.0子传父

2.1子组件

<template>
  <div class="container">
    <h1>子组件</h1>
    <button @click="send">给父组件传值</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
// 数组里面的名字可以自定义 与父组件绑定的一致就行
//非ts写法
const emit = defineEmits(["on-click"]);

//ts写法
interface My {
  name:string
  age:number
}
const emit = defineEmits<{
  (e:'on-click',my:My):void
  //传递多个就多写
  //(e:'on-click',my:My):void
}>()


const send = () => {
  let my = { 
    name: "何",
    age: 20,
  };
  emit("on-click", my);
};
</script>

2.2父接收

<template>
  <div class="container">
    <Head @on-click="getMy"></Head>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
import Head from './components/head.vue'
interface My {
  name:string
  age:number
}
const getMy = (myInfo:My) => {
  console.log(myInfo);
}
</script>

3.0 通过defineExpose子组件暴露自身方法和数据

3.1子组件

<template>
  <div class="container">
    <h1>子组件</h1>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";

defineExpose({
  name:'何',
  open:() => console.log(222)
})
</script>

3.2父组件接收

<template>
  <div class="container">
    <!-- 给组件绑定ref -->
    <Head ref="theName"></Head>
    <button @click="receive">get</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Head from "./components/head.vue";
//InstanceType<typeof Head> 是拿到子组件暴露出来的类型
const theName = ref<InstanceType<typeof Head>>();

const receive = () => {
  console.log(theName.value?.name);
  theName.value?.open()
};
</script>