vue 基礎入門筆記 13:父元件向子元件傳值、父元件向子元件傳遞方法

September發表於2019-08-16
  1. 父元件向子元件傳值: prop 是父元件用來傳遞資料的一個自定義屬性。子元件需要顯式地用 props 選項 宣告 “prop”:
  2. 父元件向子元件傳遞方法: @方法名 = 父元件的方法 子元件透過 $this.emit( '方法名' , [可傳遞引數] )
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
    <div id="app">
        //父元件向子元件傳遞方法  
        <son @func='show' :msg="'hello world'"></son>
    </div>
    <template id="son">
        <div>
            <button @click = 'showLog' type="button" class="btn btn-danger">button</button>
            <label>
                {{msg}}
            </label>
        </div>
    </template>
    <script>
        Vue.component('son', {
            //對子元件進行傳值
            //資料只可讀 無法重新賦值
            props: ['msg'],
            template: '#son',
            methods:{
                showLog(){
                    // 透過this.$emit('函式名')來呼叫父元件傳遞的方法,剩下的引數可傳遞資料
                    this.$emit('func','B')
                    console.log("aaaa")
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                show(data) {
                    console.log("執行了事件A------"+data)
                }
            }
        });
        Vue.config.devtools = true
    </script>
    </body>
    </html>
本作品採用《CC 協議》,轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章