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

URL Link //n.sfs.tw/10332

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