vue3 setup语法糖与原始写法对比

前端程序猿i

已于 2023-01-03 14:01:41 修改

阅读量4.6k

点赞数 5

文章标签： elementui vue.js javascript vue-cli3

于 2021-12-09 17:14:53 首次发布

本文链接：https://blog.csdn.net/qq_54123885/article/details/121828708

版权

本文详细介绍了Vue 3.0中的`<script setup>`语法糖，包括如何简化组件的声明、属性和方法的使用、父子组件通信以及`useSlots`和`useAttrs`的使用。通过这种方式，开发者可以更简洁地编写Vue组件，并且理解了`defineProps`和`defineEmits`在子组件暴露属性的作用。同时，文章还展示了如何在不使用`export default`的情况下实现组件功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得。

//原始写法
<template>
  <div class="hello">
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props,context){
    
  }
}
</script>


//语法糖
<template>
  <div class="hello">
    
  </div>
</template>

<script setup>

</script>

接收父组件参数

//原始写法
<template>
  <div class="hello">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:['msg'],
  setup(props){
    console.log(props.msg);
  }
}
</script>

//语法糖
<template>
  <div class="hello">
    {{type.msg}}
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const type =  defineProps({msg:String})
console.log(type.msg);
</script>

子组件传递值给父组件

//原始写法  父组件
<template>
  <HelloWorld msg="你好" @show="show"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup(){
    function show(value){
      console.log(value);
    }


    return {
      show
    }
  }
}
</script>

<style>

</style>


//原始写法  子组件
<template>
  <div class="hello">
    {{msg}}
    <button @click="test">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:['msg'],
  setup(props,context){
    function test(){
      context.emit('show',123)
    }


    return{
      test
    }
  }
}
</script>

//语法糖 父组件
<template>
  <HelloWorld msg='你好' @show="show" />
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
function show(value){
  console.log(value);
}
</script>

//语法糖  子组件
<template>
  <div class="hello">
    {{type.msg}}
  </div>
  <button @click="test">按钮</button>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue'
const type =  defineProps({msg:String})
const emit = defineEmits(['show'])
function test(){
  emit('show',1212)
}
</script>

useSlots 和 useAttrs

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

slots: 收到的插槽内容, 相当于 this.$slots。

//原始写法
<template>
  
</template>

<script>
export default {
  name: 'HelloWorld',
  setup(props,context){
  console.log(context.slots)
  console.log(context.attrs)
  }
}
</script>






//语法糖

<script setup>
import { useSlots,useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>

defineExpose
如果在父组件中通过ref的方法来获取子组件实例，
子组件使用了script setup语法糖,
则子组件的数据需要用defineExpose 的方式导出，否则不会暴露属性。

//语法糖父组件

<template>
  <daughter ref="father" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Daughter from "./vue/Daughter.vue";

const father = ref(null)
</script>


//语法糖子组件

<template>
  <div>{{ msg }}</div>
</template>

<script lang="ts" setup>
import { ref ,defineExpose} from "vue";
const msg = ref('儿子')
defineExpose({
    msg
})
</script>