[精讚] [會員登入]
1270

[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

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

vue.js component 在parent與child 傳值 component 在parent與child 傳值

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

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

axios vuejs application/x-www-form-urlencoded 送資料 VUE.JS 以 application/x-www-form-urlencoded 送資料

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

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

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

[web]校園食材登錄平臺午餐食材嵌入頁面語法 校園食材登錄平臺午餐食材嵌入頁面語法

[web] 自訂模組-打字機與跑馬燈效果 自訂模組-打字機效果

使用vbs設定windows 10 靜態IP setting static ip Set Adapter = GetObject("winmgmts:Win