vue3-setup语法糖 父子组件传值

新建子组件 Child.vue

一、父组件向子组件传值

父组件向子组件传值的时候，子组件是通过props来接收的，然后以变量的形式将props传递到setup语法糖中使用

1、父组件传递方式 

<template>
  <div class="hello">
  我是父组件
  <!-- 父组件通过:变量(这里是info)绑定值 -->
   <Child :info="parentMsg"></Child>
  </div>
</template>
 
<script setup>
import Child from './Child'
import {ref} from 'vue'
const parentMsg=ref('父组件传递值是a')
 
</script>
 
<style scoped>
 .hello{
   color:red;
  }
</style>

2、子组件接收方式和使用

<template>
<!-- info是父组件传递过来的值 -->
  <div>我是子组件拿到了父组件的值是{{info}}</div>
</template>
 
<script setup>
import { toRefs, defineProps } from 'vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: String,
})
//使用父组件传递过来的值
const {info} =toRefs(props)
 
</script>
 
<style>
 
</style>

 二、子组件向父组件传值

vue3的setup语法糖的是defineEmits

 1、子组件的传递方式

<template>
  <button @click="clickChild">点击子组件</button>
</template>
 
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
  let param={
    content:'b'
  }
  //传递给父组件
  emit('clickChild',param)
}
</script>
 
<style>
 
</style>

2、父组件接收与使用

<template>
  <div class="hello">
  我是父组件
  <!-- clickChild是子组件绑定的事件，click是父组件接受方式 -->
   <Child  @clickChild="clickEven"></Child>
 <p>子组件传递的值是 {{result}}</p>
 </div>
</template>
 
<script setup>
import Child from './Child'
import {ref} from 'vue'
const result=ref('')
const clickEven=(val)=>{
  console.log(val);
  result.value=val.content
}
</script>
 
<style scoped>
 
</style>

 传值 

子组件

<template>
  <div>
    <button @click="handleIncrement">Increment</button>
    <button @click="handleDecrement">Decrement</button>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['increment', 'decrement']);

const handleIncrement = () => {
  emit('increment');
};

const handleDecrement = () => {
  emit('decrement');
};
</script>

在父组件中，监听子组件触发的 increment 和 decrement 事件，并通过相应的处理函数来更新计数器

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <ChildComponent @increment="increment" @decrement="decrement" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const counter = ref(0);

const increment = () => {
  counter.value++;
};

const decrement = () => {
  counter.value--;
};
</script>

传参

子组件中，定义一个事件 updateValue，它会传递一个数值参数

<template>
  <div>
    <button @click="update(1)">Increment</button>
    <button @click="update(-1)">Decrement</button>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{ (e: 'updateValue', value: number): void }>();

const update = (value: number) => {
  emit('updateValue', value);
};
</script>

 在父组件中，接收 updateValue 事件，并使用传递的参数更新计数器

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <ChildComponent @updateValue="updateCounter" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const counter = ref(0);

const updateCounter = (value: number) => {
  counter.value += value;
};
</script>

传对象

 

在对象中，键是事件名，值是一个函数，该函数的参数就是事件的参数

子组件 使用对象语法定义事件和参数类型

<template>
  <div>
    <button @click="update(1)">Increment</button>
    <button @click="update(-1)">Decrement</button>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits({
  updateValue: (value: number) => true,
});

const update = (value: number) => {
  emit('updateValue', value);
};
</script>

在父组件中，接收 updateValue 事件，并使用传递的参数更新计数器

 

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <ChildComponent @updateValue="updateCounter" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const counter = ref(0);

const updateCounter = (value: number) => {
  counter.value += value;
};
</script>

三、父组件获取子组件中的属性值

当时用语法糖时，需要将组建的属性及方法通过defineExpose导出，父组件才能访问到数据，否则拿不到子组件的数据

 1、子组件的传递方式

<template>
  <div>
        <h2> 我是子组件</h2>
        <p>性别:{{ sex}}</p>
    </div>
</template>
 
<script setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref('男')
let info=reactive({
    like:'王者荣耀',
    age:18
})
defineExpose({sex, info})
</script>
 
<style>
 
</style>

2、父组件显示方式

<template>
  <div class="hello">
  我是父组件
   <Child ref="testcomRef"></Child>
<button @click="getSonHander">获取子组件中的数据</button>
 </div>
</template>
 
<script setup>
import Child from './Child'
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
  console.log('获取子组件中的性别', testcomRef.value.sex );
    console.log('获取子组件中的其他信息', testcomRef.value.info )
}
</script>
 
<style scoped>
 
</style>