vue3: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>
 
</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>
 

二、子组件向父组件传值

<Test-Com @clickChild="clickEven"></Test-Com>

const clickEven = (val: string) => {

console.log(val);

}

<template>

<button @click="clickChild">点击子组件</button>

</template>

<script lang="ts" setup>

import { defineEmits } from 'vue'

const emit = defineEmits(['clickChild'])

const clickChild = () => {

emit('clickChild', '傻逼龙成')

}

</script>

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

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

<Test-Com ref="testcomRef"></Test-Com>

<button @click="getSonHander">获取子组件中的数据</button>

<script lang="ts" setup>

import TestCom from '../components/TestCom.vue'

import { ref } from 'vue'

const testcomRef = ref()

const getSonHander = () => {

console.log('获取子组件中的性别', testcomRef.value.change());

}

</script>

<template>

<h2> 我是子组件</h2>

<p>性别:{{ sex }}</p>

<button @click="change">change</button>

</template>

<script lang="ts" setup>

import { reactive, ref, defineExpose } from "vue";

let sex = ref('男')

let info = reactive({

like: '王者荣耀',

age: 18

})

const change=()=>{

return 'lcsb'

}

defineExpose({ sex, info ,change})

 

</script>