今日要闻vue3 setup使用技巧与法语糖方法

3法语糖使用技巧与方法，即中、、、等内容非常多以后，经常需要根据中的数据去搜索找到对应的方法，上下跳跃查看代码，非常不方便，3中新增了，它的出现是为了解决组件内容庞大后阅读便利。

看代码时，经常需要根据中的数据去搜索找到对应的方法，上下跳跃查看代码，非常不方便。而在中，则可以把中的数据和方法写在相临的位置，方便查看和维护。本文详细介绍的用法

1、简单使用

先简单写一下看看效果

笔者这里使用新建的3项目，直接在A上进行修改


{{}}



{
(){
{
:"泪眼问花花不语，乱红飞过秋千去"
}
}
}



原来写在中的，在中需要返回

运行效果





2、修改中的变量值
先看下面代码，再说在中如何修改



{{}}
@=""修改




{
(){
="泪眼问花花不语，乱红飞过秋千去"
(){
="人生自是有情痴，此恨不关风与月"
}
{
,

}
}
}



按照常规逻辑，修改中的，会自然地写出上面的代码

但是这段代码是不能完成值的修改的，看运行效果



为什么值没有改变呢因为上面代码中是非响应式的

如果想要修改值，就需要把它改成响应式的，代码如下



{{}}
@=""修改




{}''
{
(){
=("泪眼问花花不语，乱红飞过秋千去")
(){
="人生自是有情痴，此恨不关风与月"
}
{
,

}
}
}



使用对进行包装

修改时使用变量的语法



运行效果




除了使用外还可以使用，二者都可以将原始数据类型转换成一个带有响应式特性的数据类型

和有什么区别，一般处理基本类型；处理复杂的数据类型



使用代码



{{O}}
@=""修改




{}''
{
(){
O=({:'今年花胜去年红。可惜明年花更好，知与谁同'})
(){
O="离愁渐远渐穷，迢迢不断如春水"
}
{
O,

}
}
}



运行效果




3、形式下的父子组件通信
代码写成形式，如何现父子组件通信，下面介绍



31、父传子
在目录下新建A作为子组件

A内容



{{}}
{{}}




{
:[''],
(){
()

{
:
}
}
}



在方法内使用来接收父组件传过来的数据



A为父组件

在A中引入A



A:=""A




A'@A'
{
:{
A
},
(){
{
:'渐行渐远渐书，水阔鱼沉何处问'
}
}
}



运行效果





32、子传父
321、子组件调用父组件方法
A内容



{{}}
@="TP"子组件向父组件传递数据




{
:[''],
(,){
()
TP(){
('')
}
{
TP
}
}
}



使用方法中参数中的

A内容



A:=""@="N"A




A'@A'
{
:{
A
},
(){
N(){
('父组件事件被调用')
}
{
:'渐行渐远渐书，水阔鱼沉何处问',
N
}
}
}



运行效果





322、子组件向父组件传递数据
子组件向父组件传递数据，父组件修改数据



A内容



{{}}
@="TP"子组件向父组件传递数据




{
:[''],
(,){
()

N='群芳过后西湖好，狼籍残红。飞絮鳌４沽阑干尽日风'
TP(){
('',N)
}
{
TP
}
}
}



A内容



A:=""@="N"A




A'@A'
{}''
{
:{
A
},
(){
=('渐行渐远渐书，水阔鱼沉何处问')
N(){
=
}
{
,
N
}
}
}



A中的要修改，所以使用包装

运行效果



4、中使用生命周期函数
在里，生命周期钩子前面加上“”来访问组件的生命周期钩子

是围绕C和生命周期钩子运行的，所以不需要显式地定义它们

内部调用生命周期钩子





代码示例






{BM,M}""
{
(){
BM(()={
('BM')
})
M(()={
('')
})
{}
}
}



运行效果









VS语法糖使用方法，与函数不同的是，在标签中添加

1、变量、方法不需要出来，属性和方法也不用返回，也不用写函数，也不用写，甚至是自定义指令也可以在我们的中自动获得


{}'';

!--变量不需要在出去了--
=("ABCD")

!--函数也可以直接引用,不用在中返回--
H=()={
=''
}

2、组件不需要在注册

使用组件，只需要引入组件就可以直接使用，不需要再在中注册（组件命采用的是大驼峰）



3、P组件传参

父组件传参：


=""
-:=""="42分钟"-




TC"TC"
='消息'

子组件接收参数：


{P}''
P({
:{
:S,
:'----'
},
:{
:S,
:'0分钟'
},
})

4、E组件抛出事件

父组件：


=""
-@A="AH"@D='DH'-




TC"TC"
AH=()={
('新增==',);
}
DH=()={
('删除==',);
}

子组件接收：



2你好2
@="1C"新增
@="2C"删除




{E}''
使用E创建称，接收一个数组
$=E(['A','D'])
1C=()={
$('A','新增的数据')
}
2C=()={
$('D','删除的数据')
}

5、E获取子组件中的属性值

子组件：


{,,E}"";
=('男')
=({
:'喜欢李',
:27
})
将组件中的属性暴露出去，这样父组件可以获取
E({
,

})

父组件：


=""
-="R"-
@="SH"获取子组件中的数据




TC"TC"
{}''
R=()
SH=()={
('获取子组件中的性别',R);
('获取子组件中的其他信息',R);
}

6、-

中绑定变量，-('变量')


开始



{}''
=({
:''
})



{
*使用-绑定中的变量*
:-('');
}






上述的结论表明荔枝发卡很大程度上能够给市场带来新的活力，让行业良好的发展。https://www.uihtm.com/zhifu/19699.htmlHTML源码网(www.uihtm.com)提供div+css3响应式模板包括：网页模板、企业模板、商城模板，以及h5网站,jQuery网页特效,wp主题等8000G源码免费模板下载。