有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue3 setup语法糖(一文掌握 vue3.2 setup 语法糖)

vue 炮渣日记 2周前 (11-13) 17次浏览 已收录 0个评论 扫描二维码

提示:Vue3.2 版本开始才能使用语法糖!

在 Vue3.0 中变量必须 return 出来,template中才能使用;而在 Vue3.2 中只需要在 script 标签上加上 setup 属性,无需 return,template 便可直接使用,非常的香啊!

提示:以下是本篇文章正文内容,下面案例可供参考

一、如何使用setup语法糖

只需在 script 标签上写上setup

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><template></span>
<span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span>  <span class="hljs-string"></script></span>
<span class="hljs-string"><style</span> <span class="hljs-string">scoped</span> <span class="hljs-string">lang="less"></span>  <span class="hljs-string"></style></pre></span>
</code>

二、data数据的使用

由于 setup 不需写 return,所以直接声明数据即可

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span>
     <span class="hljs-string">ref,</span>
     <span class="hljs-string">reactive,</span>
     <span class="hljs-string">toRefs,</span>
   <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>

   <span class="hljs-string">const</span> <span class="hljs-string">data</span> <span class="hljs-string">=</span> <span class="hljs-string">reactive({</span>
     <span class="hljs-attr">patternVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>
     <span class="hljs-attr">debugVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>
     <span class="hljs-attr">aboutExeVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>
   <span class="hljs-string">})</span>
   <span class="hljs-string">const</span> <span class="hljs-string">content</span> <span class="hljs-string">=</span> <span class="hljs-string">ref('content')</span>
   <span class="hljs-string">//使用toRefs解构</span>
   <span class="hljs-string">const</span> <span class="hljs-string">{</span> <span class="hljs-string">patternVisible,</span> <span class="hljs-string">debugVisible,</span> <span class="hljs-string">aboutExeVisible</span> <span class="hljs-string">}</span> <span class="hljs-string">=</span> <span class="hljs-string">toRefs(data)</span> <span class="hljs-string"></script></pre></span>
</code>

三、method方法的使用

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><template</span> <span class="hljs-string">>
   <button @click="onClickHelp">系统帮助</button>
</span><span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{reactive}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-string">const</span> <span class="hljs-string">data</span> <span class="hljs-string">=</span> <span class="hljs-string">reactive({</span>
     <span class="hljs-attr">aboutExeVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>
<span class="hljs-string">})</span>
<span class="hljs-string">//</span> <span class="hljs-string">点击帮助</span>
<span class="hljs-string">const</span> <span class="hljs-string">onClickHelp</span> <span class="hljs-string">=</span> <span class="hljs-string">()</span> <span class="hljs-string">=></span> <span class="hljs-string">{</span>
   <span class="hljs-string">console.log(`系统帮助`)</span>
   <span class="hljs-string">data.aboutExeVisible</span> <span class="hljs-string">=</span> <span class="hljs-literal">true</span>
<span class="hljs-string">}</span> <span class="hljs-string"></script></pre></span>
</code>

四、watchEffect的使用

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span>
 <span class="hljs-string">ref,</span>
 <span class="hljs-string">watchEffect,</span>
<span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-string">let</span> <span class="hljs-string">sum</span> <span class="hljs-string">=</span> <span class="hljs-string">ref(0)</span>
<span class="hljs-string">watchEffect(()=>{</span>
 <span class="hljs-string">const</span> <span class="hljs-string">x1</span> <span class="hljs-string">=</span> <span class="hljs-string">sum.value</span>
 <span class="hljs-string">console.log('watchEffect所指定的回调执行了')</span>
<span class="hljs-string">})</span> <span class="hljs-string"></script></pre></span>
</code>

五、watch的使用

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span>
     <span class="hljs-string">reactive,</span>
     <span class="hljs-string">watch,</span>
   <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
    <span class="hljs-string">//数据</span>
    <span class="hljs-string">let</span> <span class="hljs-string">sum</span> <span class="hljs-string">=</span> <span class="hljs-string">ref(0)</span>
    <span class="hljs-string">let</span> <span class="hljs-string">msg</span> <span class="hljs-string">=</span> <span class="hljs-string">ref('你好啊')</span>
    <span class="hljs-string">let</span> <span class="hljs-string">person</span> <span class="hljs-string">=</span> <span class="hljs-string">reactive({</span>
                   <span class="hljs-string">name:'张三',</span>
                   <span class="hljs-string">age:18,</span>
                   <span class="hljs-string">job:{</span>
                     <span class="hljs-string">j1:{</span>
                       <span class="hljs-string">salary:20</span>
                     <span class="hljs-string">}</span>
                   <span class="hljs-string">}</span>
                 <span class="hljs-string">})</span>
   <span class="hljs-string">//</span> <span class="hljs-string">两种监听格式</span>
   <span class="hljs-string">watch([sum,msg],(newValue,oldValue)=>{</span>
           <span class="hljs-string">console.log('sum或msg变了',newValue,oldValue)</span>
         <span class="hljs-string">},{immediate:true})</span>
    <span class="hljs-string">watch(()=>person.job,(newValue,oldValue)=>{</span>
       <span class="hljs-string">console.log('person的job变化了',newValue,oldValue)</span>
     <span class="hljs-string">},{deep:true})</span> <span class="hljs-string"></script></pre></span>
</code>

六、computed计算属性的使用

computed计算属性有两种写法(简写和考虑读写的完整写法)

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span>
     <span class="hljs-string">reactive,</span>
     <span class="hljs-string">computed,</span>
   <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
   <span class="hljs-string">//数据</span>
   <span class="hljs-string">let</span> <span class="hljs-string">person</span> <span class="hljs-string">=</span> <span class="hljs-string">reactive({</span>
      <span class="hljs-string">firstName:'小',</span>
      <span class="hljs-string">lastName:'叮当'</span>
    <span class="hljs-string">})</span>
   <span class="hljs-string">//</span> <span class="hljs-string">计算属性简写</span>
   <span class="hljs-string">person.fullName</span> <span class="hljs-string">=</span> <span class="hljs-string">computed(()=>{</span>
       <span class="hljs-string">return</span> <span class="hljs-string">person.firstName</span> <span class="hljs-string">+</span> <span class="hljs-string">'-'</span> <span class="hljs-string">+</span> <span class="hljs-string">person.lastName</span>
      <span class="hljs-string">})</span>  
   <span class="hljs-string">//</span> <span class="hljs-string">完整写法</span>
   <span class="hljs-string">person.fullName</span> <span class="hljs-string">=</span> <span class="hljs-string">computed({</span>
     <span class="hljs-string">get(){</span>
       <span class="hljs-string">return</span> <span class="hljs-string">person.firstName</span> <span class="hljs-string">+</span> <span class="hljs-string">'-'</span> <span class="hljs-string">+</span> <span class="hljs-string">person.lastName</span>
     <span class="hljs-string">},</span>
     <span class="hljs-string">set(value){</span>
       <span class="hljs-string">const</span> <span class="hljs-string">nameArr</span> <span class="hljs-string">=</span> <span class="hljs-string">value.split('-')</span>
       <span class="hljs-string">person.firstName</span> <span class="hljs-string">=</span> <span class="hljs-string">nameArr[0]</span>
       <span class="hljs-string">person.lastName</span> <span class="hljs-string">=</span> <span class="hljs-string">nameArr[1]</span>
     <span class="hljs-string">}</span>
   <span class="hljs-string">})</span> <span class="hljs-string"></script></pre></span>
</code>

七、props父子传值的使用

子组件代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">dust"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><template></span>
 <span class="hljs-string"><span>{{props.name}}</span></span>
<span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span> <span class="hljs-string">defineProps</span> <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
 <span class="hljs-string">//</span> <span class="hljs-string">声明props</span>
 <span class="hljs-string">const</span> <span class="hljs-string">props</span> <span class="hljs-string">=</span> <span class="hljs-string">defineProps({</span>
   <span class="hljs-attr">name:</span> <span class="hljs-string">{</span>
     <span class="hljs-attr">type:</span> <span class="hljs-string">String,</span>
     <span class="hljs-attr">default:</span> <span class="hljs-string">'11'</span>
   <span class="hljs-string">}</span> <span class="hljs-string">})</span>  
 <span class="hljs-string">//</span> <span class="hljs-string">或者</span>
 <span class="hljs-string">//const</span> <span class="hljs-string">props</span> <span class="hljs-string">=</span> <span class="hljs-string">defineProps(['name'])</span> <span class="hljs-string"></script></span>
<span class="hljs-string">父组件代码如下(示例):</span>
<span class="hljs-string"><template></span>
 <span class="hljs-string"><child</span> <span class="hljs-string">:name='name'/></span>  
<span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{ref}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
   <span class="hljs-string">//</span> <span class="hljs-string">引入子组件</span>
   <span class="hljs-string">import</span> <span class="hljs-string">child</span> <span class="hljs-string">from</span> <span class="hljs-string">'./child.vue'</span>
   <span class="hljs-string">let</span> <span class="hljs-string">name=</span> <span class="hljs-string">ref('小叮当')</span> <span class="hljs-string"></script></pre></span>
</code>

八、emit子父传值的使用

子组件代码如下(示例):

<pre class="prettyprint hljs xml" style=<span class="hljs-string">"padding: 0.5em; font-family: Menlo, Monaco, Consolas, "</span>Courier New<span class="hljs-string">", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"</span>><span class="xml"><span class="hljs-tag"><<span class="hljs-name">template</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">a-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"isOk"</span>></span>
    确定
  <span class="hljs-tag"></<span class="hljs-name">a-button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">template</span>></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">setup</span>></span><span class="javascript"> <span class="hljs-keyword">import</span> { defineEmits } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;
<span class="hljs-comment">// emit</span>
<span class="hljs-keyword">const</span> emit = defineEmits([<span class="hljs-string">'aboutExeVisible'</span>])
<span class="hljs-comment">/**
* 方法
*/</span>
<span class="hljs-comment">// 点击确定按钮</span>
<span class="hljs-keyword">const</span> isOk = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
 emit(<span class="hljs-string">'aboutExeVisible'</span>);
} </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
父组件代码如下(示例):
<template>
 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">AdoutExe</span> @<span class="hljs-attr">aboutExeVisible</span>=<span class="hljs-string">"aboutExeHandleCancel"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">template</span>></span></span>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">setup</span>></span><span class="javascript"> <span class="hljs-keyword">import</span> {reactive} <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-comment">// 导入子组件</span>
<span class="hljs-keyword">import</span> AdoutExe <span class="hljs-keyword">from</span> <span class="hljs-string">'../components/AdoutExeCom'</span>
<span class="hljs-keyword">const</span> data = reactive({
  <span class="hljs-attr">aboutExeVisible</span>: <span class="hljs-literal">false</span>,  
})
<span class="hljs-comment">// content组件ref</span>
<span class="hljs-comment">// 关于系统隐藏</span>
<span class="hljs-keyword">const</span> aboutExeHandleCancel = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
 data.aboutExeVisible = <span class="hljs-literal">false</span>
} </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></span>
</code>

九、获取子组件ref变量和defineExpose暴露

即vue2中的获取子组件的ref,直接在父组件中控制子组件方法和变量的方法

子组件代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">dust"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><template></span>
   <span class="hljs-string"><p>{{data</span> <span class="hljs-string">}}</p></span>
<span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span>
 <span class="hljs-string">reactive,</span>
 <span class="hljs-string">toRefs</span>
<span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-string">/**</span>
<span class="hljs-string">*</span> <span class="hljs-string">数据部分</span>
<span class="hljs-string">*</span> <span class="hljs-string">*/</span>
<span class="hljs-string">const</span> <span class="hljs-string">data</span> <span class="hljs-string">=</span> <span class="hljs-string">reactive({</span>
 <span class="hljs-attr">modelVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>
  <span class="hljs-attr">historyVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>  
  <span class="hljs-attr">reportVisible:</span> <span class="hljs-literal">false</span><span class="hljs-string">,</span>  
<span class="hljs-string">})</span>
<span class="hljs-string">defineExpose({</span>
 <span class="hljs-string">...toRefs(data),</span>
<span class="hljs-string">})</span> <span class="hljs-string"></script></span>
<span class="hljs-string">父组件代码如下(示例):</span>
<span class="hljs-string"><template></span>
   <span class="hljs-string"><button</span> <span class="hljs-string">@click="onClickSetUp">点击</button></span>
   <span class="hljs-string"><Content</span> <span class="hljs-string">ref="content"</span> <span class="hljs-string">/></span>
<span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{ref}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
<span class="hljs-string">//</span> <span class="hljs-string">content组件ref</span>
<span class="hljs-string">const</span> <span class="hljs-string">content</span> <span class="hljs-string">=</span> <span class="hljs-string">ref('content')</span>
<span class="hljs-string">//</span> <span class="hljs-string">点击设置</span>
<span class="hljs-string">const</span> <span class="hljs-string">onClickSetUp</span> <span class="hljs-string">=</span> <span class="hljs-string">({</span> <span class="hljs-string">key</span> <span class="hljs-string">})</span> <span class="hljs-string">=></span> <span class="hljs-string">{</span>
  <span class="hljs-string">content.value.modelVisible</span> <span class="hljs-string">=</span> <span class="hljs-literal">true</span>
<span class="hljs-string">}</span> <span class="hljs-string"></script></span>
<span class="hljs-string"><style</span> <span class="hljs-string">scoped</span> <span class="hljs-string">lang="less"></span>  <span class="hljs-string"></style></pre></span>
</code>

十、路由useRoute和useRouter的使用

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">dust"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span> <span class="hljs-string">useRoute,</span> <span class="hljs-string">useRouter</span> <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue-router'</span>
 <span class="hljs-string">//</span> <span class="hljs-string">声明</span>
 <span class="hljs-string">const</span> <span class="hljs-string">route</span> <span class="hljs-string">=</span> <span class="hljs-string">useRoute()</span>
 <span class="hljs-string">const</span> <span class="hljs-string">router</span> <span class="hljs-string">=</span> <span class="hljs-string">useRouter()</span>
 <span class="hljs-string">//</span> <span class="hljs-string">获取query</span>
 <span class="hljs-string">console.log(route.query)</span>
 <span class="hljs-string">//</span> <span class="hljs-string">获取params</span>
 <span class="hljs-string">console.log(route.params)</span>
 <span class="hljs-string">//</span> <span class="hljs-string">路由跳转</span>
 <span class="hljs-string">router.push({</span>
     <span class="hljs-attr">path:</span> <span class="hljs-string">`/index`</span>
 <span class="hljs-string">})</span> <span class="hljs-string"></script></pre></span>
</code>

十一、store仓库的使用

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">dust"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span> <span class="hljs-string">useStore</span> <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vuex'</span>
 <span class="hljs-string">import</span> <span class="hljs-string">{</span> <span class="hljs-string">num</span> <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'../store/index'</span>
 <span class="hljs-string">const</span> <span class="hljs-string">store</span> <span class="hljs-string">=</span> <span class="hljs-string">useStore(num)</span>
 <span class="hljs-string">//</span> <span class="hljs-string">获取Vuex的state</span>
 <span class="hljs-string">console.log(store.state.number)</span>
 <span class="hljs-string">//</span> <span class="hljs-string">获取Vuex的getters</span>
 <span class="hljs-string">console.log(store.state.getNumber)</span>
 <span class="hljs-string">//</span> <span class="hljs-string">提交mutations</span>
 <span class="hljs-string">store.commit('fnName')</span>
 <span class="hljs-string">//</span> <span class="hljs-string">分发actions的方法</span>
 <span class="hljs-string">store.dispatch('fnName')</span> <span class="hljs-string"></script></pre></span>
</code>

十二、await的支持

setup 语法糖中可直接使用 await,不需要写 async , setup 会自动变成 async setup

代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">Api</span> <span class="hljs-string">from</span> <span class="hljs-string">'../api/Api'</span>
 <span class="hljs-string">const</span> <span class="hljs-string">data</span> <span class="hljs-string">=</span> <span class="hljs-string">await</span> <span class="hljs-string">Api.getData()</span>
 <span class="hljs-string">console.log(data)</span> <span class="hljs-string"></script></pre></span>
</code>

十三、provide 和 inject 祖孙传值

父组件代码如下(示例):

<pre class="prettyprint hljs</span> <span class="hljs-string">xml"</span> <span class="hljs-string">style="padding:</span> <span class="hljs-number">0.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-family:</span> <span class="hljs-string">Menlo,</span> <span class="hljs-string">Monaco,</span> <span class="hljs-string">Consolas,</span> <span class="hljs-string">"Courier New"</span><span class="hljs-string">,</span> <span class="hljs-string">monospace;</span> <span class="hljs-attr">color:</span> <span class="hljs-string">rgb(68,</span> <span class="hljs-number">68</span><span class="hljs-string">,</span> <span class="hljs-number">68</span><span class="hljs-string">);</span> <span class="hljs-attr">border-radius:</span> <span class="hljs-string">4px;</span> <span class="hljs-attr">display:</span> <span class="hljs-string">block;</span> <span class="hljs-attr">margin:</span> <span class="hljs-string">0px</span> <span class="hljs-string">0px</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">font-size:</span> <span class="hljs-string">14px;</span> <span class="hljs-attr">line-height:</span> <span class="hljs-number">1.</span><span class="hljs-string">5em;</span> <span class="hljs-attr">word-break:</span> <span class="hljs-string">break-all;</span> <span class="hljs-attr">overflow-wrap:</span> <span class="hljs-string">break-word;</span> <span class="hljs-attr">white-space:</span> <span class="hljs-string">pre;</span> <span class="hljs-attr">background-color:</span> <span class="hljs-string">rgb(246,</span> <span class="hljs-number">246</span><span class="hljs-string">,</span> <span class="hljs-number">246</span><span class="hljs-string">);</span> <span class="hljs-attr">border:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">overflow-x:</span> <span class="hljs-string">auto;</span> <span class="hljs-attr">font-style:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-ligatures:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-variant-caps:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">font-weight:</span> <span class="hljs-number">400</span><span class="hljs-string">;</span> <span class="hljs-attr">letter-spacing:</span> <span class="hljs-string">normal;</span> <span class="hljs-attr">orphans:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">text-align:</span> <span class="hljs-string">start;</span> <span class="hljs-attr">text-indent:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-transform:</span> <span class="hljs-string">none;</span> <span class="hljs-attr">widows:</span> <span class="hljs-number">2</span><span class="hljs-string">;</span> <span class="hljs-attr">word-spacing:</span> <span class="hljs-string">0px;</span> <span class="hljs-string">-webkit-text-stroke-width:</span> <span class="hljs-string">0px;</span> <span class="hljs-attr">text-decoration-thickness:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-style:</span> <span class="hljs-string">initial;</span> <span class="hljs-attr">text-decoration-color:</span> <span class="hljs-string">initial;"><template></span>
 <span class="hljs-string"><AdoutExe</span> <span class="hljs-string">/></span>
<span class="hljs-string"></template></span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span> <span class="hljs-string">ref,provide</span> <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
 <span class="hljs-string">import</span> <span class="hljs-string">AdoutExe</span> <span class="hljs-string">from</span> <span class="hljs-string">'@/components/AdoutExeCom'</span>
 <span class="hljs-string">let</span> <span class="hljs-string">name</span> <span class="hljs-string">=</span> <span class="hljs-string">ref('Jerry')</span>
 <span class="hljs-string">//</span> <span class="hljs-string">使用provide</span>
 <span class="hljs-string">provide('provideState',</span> <span class="hljs-string">{</span>
   <span class="hljs-string">name,</span>
   <span class="hljs-attr">changeName:</span> <span class="hljs-string">()</span> <span class="hljs-string">=></span> <span class="hljs-string">{</span>
     <span class="hljs-string">name.value</span> <span class="hljs-string">=</span> <span class="hljs-string">'小叮当'</span>
   <span class="hljs-string">}</span>
 <span class="hljs-string">})</span> <span class="hljs-string"></script></span>
<span class="hljs-string">子组件代码如下(示例):</span>
<span class="hljs-string"><script</span> <span class="hljs-string">setup></span> <span class="hljs-string">import</span> <span class="hljs-string">{</span> <span class="hljs-string">inject</span> <span class="hljs-string">}</span> <span class="hljs-string">from</span> <span class="hljs-string">'vue'</span>
 <span class="hljs-string">const</span> <span class="hljs-string">provideState</span> <span class="hljs-string">=</span> <span class="hljs-string">inject('provideState')</span>
 <span class="hljs-string">provideState.changeName()</span> <span class="hljs-string"></script></pre></span></code>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址