从新回归Vue之3.0(二):setup,defineProps,defineEmits,变量,defineExpose

一.在setup()中不能用this

在vue2.x里飞天遁地的this没有了,因为

`setup` 的调用发生在 `data` 、`computed` 或 `methods` 被解析之前,所以它们无法在 `setup` 中被获取,这也是为了避免setup()和其他选项式API混淆。

二.setup推荐用法

<template>
  <h1>{{ msg }}</h1>
</template>

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

<style scoped>
</style>

注意点:

  • 在setup语法糖中导入组件不需要注册声明,直接在视图中使用即可;
  • 默认的vue文件结构发生改变,js默认放到页面顶部,而视图template放到js下面,style放到页面底部;
  • 导入vue文件必须写上文件后缀名.vue, 否则ts无法识别vue文件。
  • vscode插件不要用vue-format,会导致setup申明消失。

三.defineProps和defineEmits的用法

`defineProps` 和 `defineEmits` API,它们在 `<script setup>` 中都是自动可用的:

defineProps类似之前的props属性

defineEmits类似之前的this.$emit('xxx')的用法

父组件

<template>
  <HelloWorld :msg="msg" @handleClick="handleClick"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'
//data
const msg = ref('欢迎使用vite!')
//methods
const handleClick = (params)=>{
  console.log(params);
}
</script>

 子组件

<template>
  <h1>{{ msg }}</h1>
  <button @click="handleClick">点击我调用父组件方法</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
// props
const props = defineProps({
  msg: {
    type: String,
    default: "",
  },
});
// emit
const emit = defineEmits(["handleClick"]);
// methods
const handleClick = () => {
  emit("handleClick", "父组件方法被调用了");
};
</script>

四,如何创建变量

import { ref,reactive } from "vue";
// data
let a = ref(2)//ref用来创建基本数据类型
let obj = reactive({name: '张三', age: 2300})//reactive用来创建复杂数据类型
let arr = reactive(['1', '2', '3'])

五.defineExpose的用法

在vue2.x中我们可以通过this.$refs.xxx或者 this.$parent 链获取到的组件的公开实例,

但是使用 <script setup> 的组件是默认关闭的,

为了在 <script setup> 组件中明确要暴露出去的属性,使用 defineExpose 。

假如我们要在子组件里暴露一个handleClick2方法,我们要先定义这个方法

const handleClick2 = () => {
  a.value = 3
  obj.name = '我叫改变'
};

然后整个<script setup> 的最下边用

// defineExpose 统一暴露
defineExpose({
    a,
    obj,
    handleClick2
})

因为如果defineExpose代码行在上,handleClick2申明在下,会报错

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中,为了更好地支持 TypeScript 和更好地控制组件的 API,提供了两个新的函数:`defineProps` 和 `defineExpose`。 `defineProps` 允许我们在组件中定义属性,并且可以指定它们的类型、默认值等信息。这些属性是只读的,只能从组件的父组件传递到组件中。在组件中使用这些属性时,可以使用 `props` 选项来接收它们。例如: ``` import { defineComponent, defineProps } from 'vue' const Props = defineProps({ message: String, count: { type: Number, default: 0 } }) export default defineComponent({ props: Props, setup(props) { // 使用 props.message 和 props.count } }) ``` `defineExpose` 允许我们在组件中暴露一些属性或方法,以便它们可以被组件的父组件或其他组件使用。这些属性或方法是可写的,所以需要谨慎使用。在组件中使用这些属性或方法时,可以使用 `expose` 选项来暴露它们。例如: ``` import { defineComponent, defineExpose, ref } from 'vue' export default defineComponent({ setup() { const count = ref(0) const increment = () => { count.value++ } defineExpose({ count, increment }) return { count, increment } } }) ``` 在上面的例子中,我们使用 `defineExpose` 函数暴露了 `count` 和 `increment` 两个属性,以便其他组件或父组件可以使用它们。在组件中使用这些属性或方法时,可以使用 `expose` 选项来接收它们。例如: ``` <template> <div> Count: {{ count }} <button @click="increment">Increment</button> </div> </template> <script> import { defineComponent } from 'vue' import MyComponent from '@/components/MyComponent.vue' export default defineComponent({ components: { MyComponent }, setup() { const myComponent = ref(null) return { myComponent } }, mounted() { console.log(this.myComponent.count) // 访问 MyComponent 组件的 count 属性 this.myComponent.increment() // 调用 MyComponent 组件的 increment 方法 } }) </script> ``` 通过以上方式,我们可以在 Vue 3 中更好地控制组件的 API,同时也更好地支持 TypeScript。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值