[精讚] [會員登入]
1411

[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

你可能感興趣的文章

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

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

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

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

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

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

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

download a file from spring boot controllers ownload a file from spring boot controllers

python 的RE python re

java.time 時間 instant java.time

proxmox lxc 救援 今天突然接到一名強者我朋友的臨時求援 他說他把pve 從5.1升到5.2後, kvm的虛擬机器都沒問題 , 但是lxc的

ArrayList 想移除特定值 想移出water, 使用lambda 的方式如下 List<String> fruits = new Arr