[精讚] [會員登入]
2858

vue.js component 在parent與child 傳值

component 在parent與child 傳值

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

分享連結 vue.js component 在parent與child 傳值@igogo
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-24 13:59:01 最後編修
2017-07-11 18:26:51 By igogo
 

 

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

components 間怎麼溝通呢? 通常以parent-child 的闗係來傳值

props down, events up.

 

 var app = new Vue({

        el: '#app',
        data: {
            currentView: 'initView',
            item: {}
        },
        methods: {
            updateItem: function(obj) {
                this.item = obj;
                console.log(this.item);
            }
        }
    })

parent裡有一個item的obj 利用props 傳到child component

 Vue.component('initView', {
        props: ['item'],
        template: '#initView',
        data: function() {
            return {
                url: /*[[${url}]]*/                 
            }
        },
        methods: {
            getData: function() {
                console.log(this.url);
                let vm = this;
                this.$http.get(this.url).then((response) => {
                    // success callback
                    console.log(response.data.obj);
                    let obj = response.data.obj;
                    vm.$emit('get-data', obj);

                }, (response) => {
                    // error callback
                });

            }

        }
    });

child component 在跟api 取得值後利用emit 傳回parent  更新item

由getData 傳到parent的updateItem

<component :is="currentView" :item="item" v-on:get-data="updateItem">
</component>

 

getData 在HTML裡必須寫成get-data  詳見以下

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:

或是改用   string templates

 

 

<body> 
<div class="container" id="app">
        <component :is="currentView" :item="item" v-on:get-data="updateItem">
        </component>
      
</div>
    <template id="initView">
        <div>

            <p>
                {{item}}
            </p>
            <div class="btn-group">
                <button type="button" class="btn btn-success" @click="getData">讀取API</button>
            </div>
        </div>
    </template>
 <script th:inline="javascript">
    Vue.prototype.$http = axios;

    Vue.component('initView', {
        props: ['item'],
        template: '#initView',
        data: function() {
            return {
                url: /*[[${url}]]*/                 
            }
        },
        methods: {
            getData: function() {
                console.log(this.url);
                let vm=this;
                this.$http.get(this.url).then((response) => {
                    // success callback
                    console.log(response.data.obj);
                
                    let obj = response.data.obj;
                    vm.$emit('get-data', obj);

                    // this.showModal = true;
                }, (response) => {
                    // error callback
                });

            }

        }
    });


    var app = new Vue({

        el: '#app',
        data: {
            currentView: 'initView',
            item: {}
        },
        methods: {
            updateItem: function(obj) {
                this.item = obj;
                console.log(this.item);
            }
        }
    })
    </script>
</body>

 

END

你可能感興趣的文章

vue js 與teleport vue js 與 teleport 範例 <!DOCTYPE html> <html> <

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

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

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

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

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

隨機好文

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

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

臺中市雲端校務系統與Windows AD帳號整合(7) 設定校端更改密碼程式及執行

tc web 問與答 Q. 填報網址 A. https://tiny.cc/tc-web Q. 出現了以下畫面, 怎麼辦 A. 建議瀏覽器開無

刪除資料夾內的檔案 lambda 一行文 Arrays.stream(new File("/folder/path").