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

2022-05-31 02:31:15 阅读：181 来源： 互联网

标签：vue const script setup str Vue3 组件 import ref

最近发现这个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>

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

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

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>

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

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

标签：vue,const,script,setup,str,Vue3,组件,import,ref
来源： https://www.cnblogs.com/sugartang/p/16328994.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9