vue3中defineComponent和＜script setup＞语法糖区别

原创已于 2022-05-27 15:44:35 修改 · 6.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2022-03-18 10:08:07 首次发布

vue3+ts 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue组件中使用setup语法糖进行属性定义和方法传递的方法。通过示例展示了如何利用reactive、ref、toRefs等工具进行响应式数据处理，以及如何通过defineProps接收父组件参数和defineEmits传递方法给父组件。同时，讲解了在不同语法环境下（<script setup>与常规<script>）的差异和使用技巧。

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

先贴代码 defineComponent

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
} from "vue";
export default defineComponent({
  name: "aaaa",
   props: {
    //接收调用组件传回的参数
    title: { type: String, default: "3333" }
  },
  setup(props, context) {
    console.log(props);
    const data = reactive({});
    const refData = toRefs(data);
    const pageSize = ref(100);
    //传递方法给父组件
    const handleSizeChange = (val: number) => {
      pageSize.value=val
      context.emit("handleSizeChange", val);
    };

    return {
      ...refData,
      handleSizeChange,
      pageSize
    };
  }
});
</script>

所有在setup()里面的方法和值，要return 出来然后组件传递方法是用setup语法糖里面的第二个参数.emit("方法名"，传递的值)

context.emit("handleSizeChange", val);

<script setup lang='ts'>
import { 
  reactive, 
  ref, 
  toRefs, 
  onBeforeMount, 
  onMounted 
} from 'vue';
const props=defineProps({
  msg:{
    type:String,
    default:()=>'默认值'
  }
})
const emit=defineEmits(["on-change"])    //方法名
const handleClick=()=>{
  emit("on-change","子组件方法被调用")
}
</script>

不需要return,直接在里面写代码就行了，接收参数用 defineProps,传递方法用 defineEmits