Vue3 -- setup函数

最新推荐文章于 2024-07-15 07:46:03 发布

阿段--曾经跑路的IT老炮

最新推荐文章于 2024-07-15 07:46:03 发布

阅读量469

点赞数

分类专栏： Mac电脑踩坑集锦

原文链接：https://blog.csdn.net/m0_47901007/article/details/118655967

版权

Mac电脑踩坑集锦专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue3 – setup函数

setup函数

setup是组件内使用CompositionAPI的入口；
setup在created实例被完全初始化之前执行，所以在setup中不使用this；
setup返回值的数据（方法）模板可以直接使用；
setup有两个参数，props 和 context
setup数据不具备响应式
代码演示

模板使用setup数据

定义setup函数，并返回对象{name:‘张三’}.

			setup(){
                return{
                    name:'张三'
                }
            }

在模板中直接使用name

			template:`
            <div>
                {{name}}
            </div>`

页面效果：

模板使用setup方法

在模板绑定点击事件，使用setup返回的handleClick方法。

 			setup(){
                return{
                    name:'张三',
                    handleClick(){
                        console.log('法外狂徒');
                    }
                }
            }

触发点击事件后控制台：

尝试在setup中使用this

首先在methods中定义test方法。

 			methods:{
                test(){
                    console.log("test");
                }
            },

在setup中调用test方法。

			setup(){
                this.test();
                return{
                    name:'张三',
                    handleClick(){
                        console.log('法外狂徒');
                    }
                }
            }

控制台并没有按照预期打印出test，而是报错说this.test不是函数。

这是因为setup是在created实例被完全初始化之前就执行的函数，在setup执行时methods还没有挂载到this上，所以在setup中不使用this。

setup里不能执行methods里的代码，那methods里可不可以执行setup里的代码呢？

methods调用setup

在methods里调用setup函数。

 			methods:{
                test(){
                    console.log(this.$options.setup());
                }
            },
            mounted(){
                this.test();
            },

控制台输出符合预期，methods里可以调用setup

setup参数

setup有两个参数，props 和 context。props是组件接收的参数，context里面有三个属性分别是attrs、slot和emit。

attrs 指的是 Non-props属性；

		const app = Vue.createApp({
            template:`
            <div><demo app='app'/></div>`,
        }); 
        app.component('demo', {
            template:`<div>demo</div>`,
            setup(props, context){
                const { attrs, slots, emit } = context;
                console.log(attrs.app);
            }
        })

控制台打印出：app

slot 指的是 slot插槽；

 		const app = Vue.createApp({
            template:`<div>123</div>`,
        }); 
        app.component('demo', {
            setup(props, context){
                const { h } = Vue;
                const { attrs, slots, emit } = context;
                return () => h('div', {}, slots.default())
            }
        })

页面效果

emit 指的是 $emit;

 const app = Vue.createApp({
            methods:{
                changeClick(){
                    console.log('changeClick');
                }
            },
            template:`<demo @change="changeClick">123</demo>`,
        }); 
        app.component('demo', {
            template:`<div @click="handleClick">123456</div>`,
            setup(props, context){
                const { attrs, slots, emit } = context;
                function handleClick(){ emit('change');}
                return { handleClick  }
            }
        })

触发点击事件后，控制台成功打印：changeClick

setup数据不具备响应式
template:

           <div @click="handleClick(name)">{{name}}</div>`,
           setup(props, context){
               // this.test();
               // console.log(props, context);
               return{
                   name:'张三',
                   handleClick(name){
                       name = "李四";
                       console.log(name);
                       console.log('法外狂徒');
                   }
               }
           }

触发点击事件后页面效果

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 -- setup函数</title>
    <!-- 使用CDN引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>

        const app = Vue.createApp({
            methods:{
                test(){
                    console.log(this.$options.setup());
                }
            },
            mounted(){
                this.test();
            },
            template:`
            <div @click="handleClick">{{name}}</div>`,
            setup(){
                // this.test();
                return{
                    name:'张三',
                    handleClick(){
                        console.log('法外狂徒');
                    }
                }
            }
        }); 
        const vm = app.mount('#root');
    </script>

</body>
</html>

总结
setup是组件内使用CompositionAPI的入口；
setup在created实例被完全初始化之前执行，所以在setup中不使用this；
setup返回值的数据（方法）模板可以直接使用；
setup有props、context两个参数，context里面有attrs、slot和emit三个属性；
setup数据不具备响应式；
setup数据不具备响应式，那如何让setup数据具备响应式呢？请观看下一节响应式引用

结语

本小节到此结束，谢谢大家的观看！

如有问题欢迎各位指正
————————————————
版权声明：本文为CSDN博主「程序员二狗」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_47901007/article/details/118655967

阿段--曾经跑路的IT老炮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3 -- setup函数

**Vue3 – setup函数**setup函数setup是组件内使用CompositionAPI的入口；setup在created实例被完全初始化之前执行，所以在setup中不使用this；setup返回值的数据（方法）模板可以直接使用；setup有两个参数，props 和 contextsetup数据不具备响应式代码演示模板使用setup数据定义setup函数，并返回对象{name:‘张三’}. setup(){ return{
复制链接

扫一扫

专栏目录