[精讚] [會員登入]
1262

[vue.js] 動態的props 做parent-child components 雙向綁定

vue.js props components camel-case

分享此文連結 //n.sfs.tw/10332

分享連結 [vue.js] 動態的props 做parent-child components 雙向綁定@igogo
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-17 09:07:09 最後編修
2016-11-30 22:27:21 By igogo
 

 

不囉唆, 先上重點

https://vuejs.org/v2/guide/components.html

HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

 

在HTML 中 是不分大小寫的, 但是在javascript 中大小寫是不一樣的 , 所以在vue.js 中做componets 資料的雙向綁定時 必須要把大小寫的變數名轉換為kebab-case (-號區分)

請參考

https://en.wikipedia.org/wiki/Letter_case#Special_case_styles

 

範例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        In parent:{{currentView}}
        <br/>
        <button @click="setView('A')" class="btn">a</button>
        <button @click="setView('B')" class="btn">b</button>
        <component :is="currentView" :msg-obj="msgObj">
            <p>This is some original content</p>
            <p>This is some more original content</p>
        </component>
    </div>
    <script type="text/x-template" id="A">
        <h1>A.This is {{msgObj.a}}</h1>
    </script>
    <script type="text/x-template" id="B">
        <h1>B. This is {{msgObj.b}}</h1>
    </script>
    <script>
    Vue.component('A', {
        props: ['msgObj'],
        template: '#A'
    });
    Vue.component('B', {
        props: ['msgObj'],
        template: '#B'
    });

    var app = new Vue({
        el: '#app',
        data: {
            currentView: '',
            msgObj: {
                a: 'msga',
                b: 'msgb'
            }
        },
        methods: {
            setView: function(setViewOption) {
                this.currentView = setViewOption;
            }
        }
    });
    </script>
</body>

</html>

 

關鍵在

 

    <component :is="currentView" :msg-obj="msgObj">
            <p>This is some original content</p>
            <p>This is some more original content</p>
        </component>

msgObj => msg-obj

 

END

你可能感興趣的文章

將google試算表當作簡易資料庫,利用Google apps cript 在網頁上操作查詢 將google試算表當作簡易資料庫,利用apps cript 在網頁上操作查詢 若我有一試算表資料 縣市 status

題庫批次匯入google表單 請先建一新試算表, 將題目轉成格式如下 並將網址列記下來, 後續的題目就是從此試算表讀出 題目 答案 選項一 選項二 選

vue.js modal 作兩個選項按鈕並導向不同頁面 vue.js modal 作兩個選項按鈕

javascript 陣列 javascript 陣列可以放各种型別的元素 let data = [1,2,"john",tru

[javascript] 將角色物件放到清單中,並依序讀出每個角色的X值 參考在scratch中建立三個角色並且給定值 http://n.sfs.tw/content/index/14716 一

word題目轉google測驗 word題目轉google測驗

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

編碼的順序 utf8 big5

hoc2018灑水機器人 灑水機器人的工作是替行道樹灑水,機器人的灑水範圍有限(左前方、左方、左後方),請寫程式控制機器 人判斷須灑水的狀況。每顆

臺中市雲端校務系統與Windows AD帳號整合(8) 三 開機啟動服務 3-1 Windows Server上隨系統開機啟動服務 寫一個bat檔 cd C:UsersAdmi

Google sheet 建立成績單的總分及排名並提供名字下拉查詢 Google sheet, sum, rank, pull down list

如何在docker 的nginx 做另一個container的反向代理 環境 docker 中一container 跑 nginx 對外服務80 port, http://server 另一c