Vue3組件間傳值避坑方法有哪些-Vue.js-PHP中文網

實例填坑

#坑一

#1. 發現天坑

首頁

web前端

Vue.js

Vue3組件間傳值避坑方法有哪些

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 15, 2023 am 08:34 AM

實例填坑

#坑一

#1. 發現天坑

我們透過一個計數器元件來示範這個坑，當想對父元件傳遞過來的值做操作時，發現操作無效，先看程式碼：

<!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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>组件间传值</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                num:0
            }
        },
       template: `
                <div>
                   <counter :count = "num"/>
                </div>
                ` 
    });
    // 定义一个test组件
    app.component(&#39;counter&#39;,{
       props: [&#39;count&#39;],
      template: `<div @click="count+=1">{{count}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

登入後複製

在上面的程式碼中，我們定義了一個counter元件接收父元件的一個count值，當點擊這個顯示的值時，我們做加一操作。這時候我們執行程式碼會發現，我們的值不會完成加一操作，而是會報父元件傳遞過來的值是唯讀的：

Vue3組件間傳值避坑方法有哪些

##2 . 填坑時刻

那假如我們要完成這個加一的功能怎麼辦呢？答案就是我們複製一份父元件傳遞過來的值，對我們自己的值進行操作：

<!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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>组件间传值</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                num:0
            }
        },
       template: `
                <div>
                   <counter :count = "num"/>
                </div>
                ` 
    });
    // 定义一个test组件
    app.component(&#39;counter&#39;,{
       props: [&#39;count&#39;],
       data(){
        return{
            mCount:this.count
        }
       },
      template: `<div @click="mCount+=1">{{mCount}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

登入後複製

這時候我們再執行程式碼就會發現我們可以做加一操作了：

Vue3組件間傳值避坑方法有哪些

坑2:

1.發現天坑

當我們定義一個單字名稱比較長的屬性，並且用「-」分隔符號連接的時候，子組件無法接收到正確的值，顯示NaN。程式碼如下：

<!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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>组件间传值</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                content:"hello world"
            }
        },
       template: `
                <div>
                   <test :content-helloworld = "content"/>
                </div>
                ` 
    });
    // 定义一个test组件
    app.component(&#39;test&#39;,{
       props: [&#39;content-helloworld&#39;],
      template: `<div>{{content-helloworld}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

登入後複製

在上面的程式碼中，我們使用

content-helloworld這個屬性在父元件和子元件之間傳值，按照我們的理解，應該是能傳遞成功的，但是顯示的結果卻不正確

Vue3組件間傳值避坑方法有哪些

上面到坑也是VUE中的單向資料流的概念，即子元件可以使用父元件傳遞過來的數據，但是不能修改父元件傳遞過來的資料

2.填坑時刻

當我們定義的屬性值中有用「-」分隔符號分隔時，我們在接收值的時候，需要將屬性名稱改成駝峰命名的方式，如上面的例子中父元件使用

content-helloworld傳遞值到子元件，那麼子元件接收到時候應該將其改成駝峰命名方式：使用contentHelloworld接收

<!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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>组件间传值</title>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                content:"hello world"
            }
        },
       template: `
                <div>
                   <test :content-helloworld = "content"/>
                </div>
                ` 
    });
    // 定义一个test组件
    app.component(&#39;test&#39;,{
       props: [&#39;contentHelloworld&#39;],
      template: `<div>{{contentHelloworld}}</div>`
    });
    const vm = app.mount(&#39;#root&#39;);
</script>
</html>

登入後複製

這樣值就能正確顯示了

Vue3組件間傳值避坑方法有哪些 #

以上是Vue3組件間傳值避坑方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7557

CakePHP 教程

1384

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發，就會出現require引入圖片報錯，requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入，是因為typescript不支援require所以用import導入，下面介紹如何解決：使用awaitimport

vue3專案中怎麼使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一個功能齊全的富文本編輯器插件，但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利，tinymce本身並不適配Vue，還需要引入@tinymce/tinymce-vue，並且它是國外的富文本插件，沒有透過中文版本，需要在其官網下載翻譯包(可能需要翻牆)。 1.安裝相關依賴npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下載中文包3.引入皮膚和漢化包在項目public資料夾下新建tinymce資料夾，將下載的

Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

想要實現頁面的局部刷新，我們只需要實現局部元件（dom）的重新渲染。在Vue中，想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染，也可以新建一個空白元件，需要刷新局部頁面時跳轉至這個空白元件頁面，然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示，如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載，並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o

Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue實作部落格前端，需要實作markdown的解析，如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked，程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下：一、安裝依賴庫在vue專案下開啟命令窗口，並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 May 17, 2023 am 08:19 AM

vue3專案打包發佈到伺服器後存取頁面顯示空白1、處理vue.config.js檔案中的publicPath處理如下：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

Vue3中怎麼實現選取頭像並裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的，如果時Vue2或想使用其他的方式引用，請訪問它的npm官方地址:官方教程。在元件中引用使用時也很簡單，只需要引入對應的元件和它的樣式文件，我這裡沒有在全域引用，只在我的元件檔案中引入import{userInfoByRequest}from'../js/api' import{VueCropper}from'vue-cropper&

怎麼使用vue3+ts+axios+pinia實現無感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

前言無論是vue還是react，當我們遇到多處重複程式碼的時候，我們都會想著如何重複使用這些程式碼，而不是一個檔案裡充斥著一堆冗餘程式碼。實際上，vue和react都可以透過抽組件的方式來達到復用，但如果遇到一些很小的程式碼片段，你又不想抽到另外一個檔案的情況下，相比而言，react可以在相同文件裡面宣告對應的小元件，或透過renderfunction來實現，如：constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

See all articles

Vue3組件間傳值避坑方法有哪些

實例填坑

#坑一

#1. 發現天坑

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題