Vue3 setup的使用

setup 的执行时机比beforeCreate还要早并且setup里面的this是undefined

    beforeCreate(){console.log('---beforeCreate---',this)},setup(props,context){console.log('---setup---',this);}

执行结果：

setup 能接收的参数（两个参数）

1 props 配置声明且传入了的属性对象

2 context 上下文包含三个我们经常用到的内容

attrs 没有在props配置中声明的属性对象, 相当于vue2中的 this.$attrs

slots: 传入的插槽内容的对象, 相当于vue2中的 this.$slots

emit: 自定义事件的函数, 相当于vue2中的 this.$emit

props：

根组件中：

<mine msg='你好' :data="1"></mine>

子组件中

<template><div><h2>人的信息</h2><h2>人的姓名：{{person.name}} --{{msg}}</h2><h2>人的年龄：{{person.age}} --{{data}}</h2></div>
</template><script>
import { reactive } from 'vue-demi';
export default {props:['msg','data'],setup(props,context){console.log(props);}
}</script>

执行结果：

可以收到到父组件的传值

attrs

我们不去接收data

props:['msg'],

然后我们去打印查看 attrs

setup(props,context){console.log(context.attrs);
}

结果：

自定义事件：

父组件中：绑定一个hello事件

<template><mine @hello="showHello">
</template><script>
import mine from '@/pages/Mine/mine'
export default {setup() {function showHello(value){alert(`你好 我收到的参数是${value}`)}return {showHello}},};
</script>

子组件中：

<template><div><el-button type="primary" @click="test">触发自定义事件</el-button></div>
</template><script>
import { reactive } from 'vue-demi';
export default {// 声明一下  外部给组件 绑定了一个hello事件emits:['hello'],setup(props,context){// 自定义事件console.log(context.emit);function test(){context.emit('hello','vue3 setup的context')}return {test}}};
</script>

执行结果：

点击按钮触发自定义事件

插槽

父组件中:

注意：我们给插槽命名的时候需要使用v-slot命令

<template><mine><!-- 插槽 --><template v-slot:test><span>标签 </span></template></mine>
</template>

mine组件中：

<template><div class="mine">我的页面<slot name="test"></slot></div>
</template>

    setup(props,context){console.log(context.slots);}

执行结果：

Vue3 setup的使用相关推荐

Vue2与Vue3 setup的使用差异与对比
最近一直在做vue2的技术栈升级,于是心血来潮,就想要不写篇文章总结一下vue2和vue3在使用上的不同吧,于是乎,我们这就开始吧! 首先说明一下,vue3有多种写法,本文使用setup语法糖,不考虑 ...
vue3 setup + ts + vite 项目问题解决：Cannot find module ... or its corresponding type declarations.（ts2307）
昨日我尝试使用vue3 setup + ts + vite进行vue3项目的实现,遇到此问题: Cannot find module ... or its corresponding type dec ...
Vue3 setup语法糖勾子函数使用简易教程（上）
Vue3 setup语法糖勾子函数使用简易教程(上) 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. ...
vue3 setup 父传子，子传父
vue3父子组件传值 vue3 setup父子传值父组件把值传给子组件举例:父组件: 子组件父组件给子组件传值: <FatherComponent/> <son-compone ...
VUE3(setup响应式函数系统API)
Vue3.0提供的一组具有响应式特性的杉树式API,以函数的形式提供 1.reactive reactive()函数接收一个普通对象,返回该普通对象的响应式代理对象 2.ref ref()函数接收一个 ...
vue3 setup写法（语法糖版本）
vue3.2 版本开始才能使用语法糖! 在 Vue3.0 中变量必须 return 出来, template 中才能使用:而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无 ...
vue3 setup语法糖事件引用和写法
setup基础用法 setup是vue3新增的一个属性,默认写法是在代码中用setup方法,然后在setup中return. setup(){const func = () => {//这里写方 ...
vue3+setup写法
setup函数是 Composition API(组合API)的入口在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用 <script>expor ...
vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了<script setup> 这种写法,那么子组件方法需要采用defineExpose()进行修饰,才能被外界调用.上代码: 1.子组件 _p ...

Vue3 setup的使用

setup 的执行时机比beforeCreate还要早并且setup里面的this是undefined

setup 能接收的参数（两个参数）

props：

attrs

自定义事件：

插槽

Vue3 setup的使用相关推荐

最新文章

热门文章

Vue3 setup的使用

setup 的执行时机比beforeCreate还要早 并且setup里面的this是undefined

setup 能接收的参数 （两个参数）

props：

attrs

自定义事件：

插槽

Vue3 setup的使用相关推荐

最新文章

热门文章

setup 的执行时机比beforeCreate还要早并且setup里面的this是undefined

setup 能接收的参数（两个参数）