脚本宝典收集整理的这篇文章主要介绍了Vue3的script setup语法糖这么好用的吗????,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<template>
<h1>Tangdoudou</h1>
<h1>{{ num }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
setup() {
const num = 123;
return { num };
},
});
</script>
<template>
<h1>Tangdoudou</h1>
<h1>{{ num }}</h1>
</template>
<script setup>
// import { defineComponent } from 'vue';
// export default defineComponent({
// name: 'App',
// setup() {
const num = 123;
// return { num };
// },
// });
</script>
'vue/setup-compiler-macros': true
<template>
<h3>响应式数据</h3>
<h3>{{ str }}</h3>
</template>
<script setup>
import { ref } from 'vue';
var str = ref('11122334');
</script>
<template>
<h3>响应式数据</h3>
<h3>{{ str }}</h3>
<button @click="str += '数据变啦~'">点击改变str</button>
</template>
<script setup>
import { ref } from 'vue';
var str = ref('11122334');
</script>
<template>
<div style="background-color: pink">
<h4>这个是子组件的内容</h4>
<button @click="onMyClick">点击后传输信息给父组件</button>
<h4>这是父组件传入的信息:{{ msg }}</h4>
</div>
</template>
<script >
// 声明一些额外的配置选项
export default {
name: 'ChildPage',
};
</script>
<script setup>
const props = defineProps({
msg: String,
});
// 定义emit事件
const emit = defineEmits({
childFun: null,
});
function onMyClick() {
emit('childFun', { val: '我是子组件的值~啦啦啦~~' });
}
</script>
<template>
<h3>响应式数据</h3>
<h3>{{ str }}</h3>
<button @click="str += '数据变啦~'">点击改变str</button>
<ChildPage msg="1234" @childFun="parentFun"></ChildPage>
</template>
<script setup>
import ChildPage from './ChildPage.vue';
import { ref } from 'vue';
var str = ref('11122334');
const parentFun = (e) => {
console.log('parentFun:', e);
};
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const a = 1
const b = ref('2')
defineExpose({
a,
b
})
</script>
<template>
<Child ref="refChild" />
<div @click="onClick">123</div>
</template>
<script lang="ts" setup>
import Child from './Child.vue'
const refChild = ref<any>(null)
function onClick () {
console.log(refChild.value) // { a: 1, b: '2' }
}
</script>
<script setup>
const post = await fetch(`/apiXXX`).then(res => {})
</script>
<script lang="ts" setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
欢迎大家指出文章需要改正之处~ 学无止境,合作共赢
以上是脚本宝典为你收集整理的Vue3的script setup语法糖这么好用的吗????全部内容,希望文章能够帮你解决Vue3的script setup语法糖这么好用的吗????所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。