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

September發表於2019-08-16
Vue筆記元件
  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 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章