vue.js(19)--vue中子組件調用父組件的方法


子組件是不能直接使用父組件中的方法的,需要進行事件綁定(v-on:自定義方法名="父組件方法名"),然后在子組件中再定義一個方法,使用this.$emit('自定義方法名')語句完成父組件中方法到子組件中的調用,最后直接調用子組件中定義的方法即可。

<div class="app">
        <mycom v-on:func="parentshow"></mycom>
        <!-- 通過v-on:綁定方法將父組件中的方法綁定到func,
            然后在子組件中定義一個方法(this.$emit('func'))將func傳遞給子組件,
            這樣子組件就可以通過自己的方法來調用父組件的方法 -->
    </div>
    <template id="cmp">
        <div>
            <a href="#" @click.prevent="show">快點我</a>
        </div>
    </template>
    <script>
        var vm = new Vue({
        el:'.app',
        data:{
            msg:'我是父組件的方法'
        },
        methods:{
            parentshow(){
                alert(this.msg)
            }
        },
        components:{
            mycom:{
                template:'#cmp',
                methods:{
                    show(){
                        this.$emit('func')//通過此方法在子組件建立方法來調用父組件中的方法
                    }
                }
            }
        }
    })  
    </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM