vue3中 setup注意点

2022年7月23日08:16:41

vue3中 setup注意点

setup执行的时机:在beforeCreate之前执行一次,this是undefined。

vue3中 setup注意点

vue3中 setup注意点

setup参数(只能收到2个):

1 props:值 为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
2 context:上下文对象。
(1)attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this. $attrs。
(2)slots: 收到的插槽内容,相当于this. $slots。
(3)emit: 分发自定义事件的函数,相当于 this. $emit。

解析
vue3中 setup注意点
注意的是setup接收参数的时候,必须有props接收声明,否则就会警告,跟vue2是不一样的。

context是一个对象
vue3中 setup注意点
vue3中 setup注意点
传值事件上也是不一样的。
父组件App
vue3中 setup注意点
子组件
vue3中 setup注意点
插槽 建议直接用 v-slot: slot名
vue3中 setup注意点

vue3中 setup注意点
vue3中 setup注意点

vue3中 setup注意点

vue3的生命周期钩子函数后边在说。

我们在看一下vue2 的 知识点。
插槽: slot可以给组件动态插入一些内容或组件,是实现高阶函数的重要途径,当需要多个插槽时,可使用具名插槽slot。
父子组件传值 props / this.$emit
父组件向子组件传值:在子组件标签上绑定自定义属性名(:child = ‘value’),值是父组件要传递的数据,在子组件内部通过props 属性来接收 ‘自定义属性名’,页面在展示上,通过接收的 {{属性名}} 显示。(父子之间是上下传值)
子组件向父组件传值:在子组件标签上绑定自定义事件(@change= ‘change’),子组件内部通过 $emit 给该事件推送数据(this. $emit(‘绑定的自定义事件名’,this.数据))。父组件内部通过“函数参数”接收。(子组件之间是平行传值)

<fu>
	<zi :isdel=”fuvalue” @ziuser=”fudel”></zi>
	Methods:{
		Fudel(value){ Console.log(value) }
	}
</fu>
<zi @click=”user”>
	props:{isdel:{对象形式}} 或者 props:[“isdel”]
	methods:{
		User(){this.$emit(“ziuser”,’this.value’) }
	}
</zi>

vue2生命周期钩子函数以及每个阶段的作用

vue实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程;
常用的

beforeCreate() 在实例创建之间执行,数据未加载状态/

created() 在实例创建、数据加载后,能初始化数据,dom渲染之前执行/

beforeMount() 虚拟dom已创建完成,在数据渲染前最后一次更改数据/

mounted() 页面、数据渲染完成,真实dom挂载完成/

beforeUpadate() 重新渲染之前触发/

updated() 数据已经更改完成,dom 也重新 render 完成,更改数据/

beforeDestory() 是销毁前执行(实例仍然完全可用)/

destoryed() 则是销毁后执行/

keep-alive 缓存。
  • 作者:小刘先生很努力
  • 原文链接:https://blog.csdn.net/lzfengquan/article/details/125271028
    更新时间:2022年7月23日08:16:41 ,共 1224 字。