当前位置:网站首页>Composition API premise
Composition API premise
2022-07-07 07:10:00 【To be a woman of light】
One 、setup Use of
1. In order to start using Coposition API, We need one that can actually use it ( Where to write code );
2. stay Vue In the component , This position is setup function ;
Two 、setup Understanding of
setup In fact, it is another option of the component :
But this option is so powerful that we can use it to replace most of the other options abbreviated before ;
such as methods、computed、watch、data、 Life cycle and so on .
3、 ... and 、setup Use of functions ( Pay attention to setup There is no binding inside this Of )
- First of all, we have to understand setup Which parameters of the function ?
A: It has two main parameters :
The first parameter :props ( Properties passed by the parent component )
The second parameter :context: It contains three attributes
attrs: All the non props Of attribute;
slots: Slot passed from parent component ( This will work when returned as a render function )
emit: When we need to send events inside the component, we will use emit( Because we can't access this, So you can't pass this.$emit Send out an event )
export default {
props:{
message:{
type:String,
required:true
}
},
// Parameters 1:props, Properties passed by the parent component
// Parameters 2:
// The way 1:
// setup(props,context){
// console.log(props.message); // Parameters 1
// console.log(context.attrs.id)
// }
//
// The way 2: Yes context Make a deconstruction
setup(props,{attrs,slots,emit}){
console.log(props.message); // Parameters 1
console.log(attrs.id);
console.log(slots);
console.log(emit);
}
2.setup What kind of return value does the function have
setup The return value can be in the template template Is used in ;
That is to say, we can pass setup Instead of data Options ;
setup(){
let counter=100;
//1. stay setup It defines a local function
const increat=()=>{
counter++
console.log(counter);
}
return{
counter,
increat //2. Return this function
}
}
Four 、setup Not available this
- The meaning of the expression is this Does not point to the current component instance ;
- also stay setup Before being called ,data、computed、methods And so on have not been resolved
- therefore Cannot be in setup In order to get this;
5、 ... and 、 How to read the source code :
6、 ... and 、 How to be in setup It makes the data responsive
(1)reactive API Help data to be responsive
<template>
<div id="app">
<!-- Data presentation -->
<span> Current count :{
{state.counter}}</span>
<button @click="increat"></button>
</div>
</template>
<script>
// 1.vue3 Provided reactive API Be responsive
import {reactive} from 'vue'
export default {
props:{
message:{
type:String,
required:true
}
},
setup(){
//2. Now use the responsive data reactive Make a package
const state=reactive({
counter:100;
})
//3. stay setup It defines a local function
const increat = ()=>{
state.counter++;
console.log(state.counter);
}
// Returned data
return {
state,
increat //2. Return this function
}
}
}
</script>
(2)ref API
reative API Yes The types passed in are limited , It requires that our incoming must be An object or array type ;
If we pass in a Basic data type (String、Number、Boolean) There will be a warning ;
This is the time Vue3 It provides us with another API:ref API
- ref Will return a mutable responsive object , This object maintains its internal values as a responsive reference , This is it. ref The source of the name
- Its internal value is in ref Of value Maintained in the property ;
Here are two things to note :
stay Template Introduction ref The value of , Vue Meeting Automatically help us unpack , So we There is no need to pass in the template ref.value The way To use
<template> <div id="app"> <!-- When we're in template Used in template ref object , He will automatically unpack , --> <span> Current count :{ {counter}}</span> <button @click="increat"></button> </div> </template> <script> // 1.vue3 Provided reactive API Be responsive import {ref} from 'vue' export default { props:{ message:{ type:String, required:true } }, setup(){ //counter To become a ref A responsive reference to let counter=ref(100); //3. stay setup It defines a local function const increat = ()=>{ counter.value++; console.log(counter); } // Returned data return { counter, increat //2. Return this function } } } </script>
边栏推荐
- . Net core accesses uncommon static file types (MIME types)
- DHCP路由器工作原理
- 工具类:对象转map 驼峰转下划线 下划线转驼峰
- How can clothing stores make profits?
- 2022年全国所有A级景区数据(13604条)
- [explanation of JDBC and internal classes]
- 2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第二阶段答案
- Jesd204b clock network
- Comment les entreprises gèrent - elles les données? Partager les leçons tirées des quatre aspects de la gouvernance des données
- Networkx drawing and common library function coordinate drawing
猜你喜欢
Several index utilization of joint index ABC
From zero to one, I will teach you to build the "clip search by text" search service (2): 5 minutes to realize the prototype
Big coffee gathering | nextarch foundation cloud development meetup is coming
Complete process of MySQL SQL
Jetpack compose is much more than a UI framework~
Bus消息总线
MATLAB小技巧(30)非线性拟合 lsqcurefit
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第一阶段答案
关于数据库数据转移的问题,求各位解答下
MySQL view bin log and recover data
随机推荐
Pass parent component to child component: props
2018年江苏省职业院校技能大赛高职组“信息安全管理与评估”赛项任务书第二阶段答案
MySQL user permissions
LVS+Keepalived(DR模式)学习笔记
CompletableFuture使用详解
.net 5 FluentFTP连接FTP失败问题:This operation is only allowed using a successfully authenticated context
A slow SQL drags the whole system down
$refs:组件中获取元素对象或者子组件实例:
Exception of DB2 getting table information: caused by: com ibm. db2.jcc. am. SqlException: [jcc][t4][1065][12306][4.25.13]
leetcode 509. Fibonacci number
How can clothing stores make profits?
Basic process of network transmission using tcp/ip four layer model
DHCP路由器工作原理
Non empty verification of collection in SQL
Data of all class a scenic spots in China in 2022 (13604)
Precise space-time travel flow regulation system - ultra-high precision positioning system based on UWB
Jetpack compose is much more than a UI framework~
Get the city according to IP
选择商品属性弹框从底部弹出动画效果
JWT的基础介绍