谁可以告诉我vue3的setup语法糖设置了不起作用是什么原因
急
<template>
<Index />
</template>
<script setup>
// 不需要挂载注册
import Index from './index.vue';
</script>
// 父组件 Father.vue
<template>
<Index ref="IndexRefs" />
</template>
<script setup>
import Index from './index.vue';
import { onMounted , ref } from 'vue';
const IndexRefs = ref(null)
onMounted (()=>{
IndexRefs.value.num +1 // 1
IndexRefs.value.click() // 2
})
</script>
// 子组件 Index.vue
<template>
num:{{ num }}
</template>
<script setup>
import { ref } from 'vue';
const num = ref(0)
const click = () =>{
num .value +2
}
// 父级想操作的数据 或者 方法导出去
defineExpose({
num
click
});
</script>
// 父传子
// 父组件 Father.vue
<template>
<Index :num="num" />
</template>
<script setup>
import Index from './index.vue';
import { ref } from 'vue';
const num = ref(10)
</script>
// 子组件 Index.vue
<template>
{{ num }}
</template>
<script setup>
// 接收值
const { num } = defineProps({
num : Number,
});
console.log('num' , num)
</script>
// 子传父
// 父组件 Father.vue
<template>
<Index @porpsClick="btn" />
</template>
<script setup>
import Index from './index.vue';
const btn = (_porps) => {
console.log('_porps' , _porps) // 123
}
</script>
// 子组件 Index.vue
<template>
<button @click="btn">点我传参</button>
</template>
<script setup>
const emit = defineEmits(['porpsClick']);
const btn = () =>{
emit( 'porpsClick' , 123 )
}
</script>
<script setup>
import { useAttrs, useSlots } from 'vue';
const attrs = useAttrs();
const slots = useSlots();
</script>
此文章是为了记录学习,
有什么没提到的可以交流,互相学习