[精讚] [會員登入]
1522

[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

你可能感興趣的文章

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

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

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

vue.js components 多個組件的呈現 vue.js 組件 component

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

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

隨機好文

利用maven建立一個可執行的jar檔 利用maven建立一個可執行的jar檔

資料表更改為多個primary key, MariaDB [database]> describe TABLENAME; 想由本來是兩個PRIMARY KE

00-F2 的 IPV6 反解設定 近日, 強者我的大神同事, line 傳來一句: igogo 上次你那個ipv6的設定檔 再幫我跑一次 如連結 程式都寫

windows ad 如何得知 dn 值 如何得知 windows ad 上的使用者dn 值 https://support.symantec.com/en_US

臺中市校務雲端系統與Windows AD帳號整合(1) active directory,ldaps,雲端校務系統