• 欢迎光临~

Vue3的script setup语法糖这么好用的吗????

开发技术 开发技术 2022-05-30 次浏览

最近发现这个vue3居然还可以这样写

  • 原始写法
<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>

Vue3的script setup语法糖这么好用的吗????

  • 我直接把lang=ts去了,但是我们可以选择其他方式:
  • 在script setup 中使用defineProps,defineEmits会报未定义,需要配置eslint
  • 根据官网配置
  • 链接:https://eslint.vuejs.org/user-guide/#faq
  • 代码
 'vue/setup-compiler-macros': true

Vue3的script setup语法糖这么好用的吗????

响应式数据

<template>
  <h3>响应式数据</h3>
  <h3>{{ str }}</h3>
</template>

<script setup>
import { ref } from 'vue';
var str = ref('11122334');
</script>

Vue3的script setup语法糖这么好用的吗????

点击改变数据

<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>

Vue3的script setup语法糖这么好用的吗????

对外界暴露组件实例

  • 子组件
<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>

await也简单啦

  • 在script setup下可以直接使用await
<script setup>
const post = await fetch(`/apiXXX`).then(res => {})
</script>

slots 和 attrs

<script lang="ts" setup>
import { useSlots, useAttrs } from 'vue'

const slots = useSlots()
const attrs = useAttrs()
</script>

欢迎大家指出文章需要改正之处~
学无止境,合作共赢
Vue3的script setup语法糖这么好用的吗????

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

程序员灯塔
转载请注明原文链接:Vue3的script setup语法糖这么好用的吗????
喜欢 (0)