子組件調用父組件方法


<body>

    <div id="app">
        <button>注冊</button>
        <button>登錄</button>
        <com @fun="funparent"></com>    //1.自定義方法: fun(在子組件調用),調用父組件方法:funparent
    </div>
    
    
    <template id="tem">
        <div>
            <button @click="e">注冊頁面{{ msgs }}</button>   // 3.綁定事件觸發子組件的e方法
            <h1 >登錄頁面</h1>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
       var vm = new Vue({
           el:'#app',
           methods:{                  
               funparent(x){    
                   console.log('這是一個父組件方法'+ x)
               }
           },
           components:{
               com:{
                   template:'#tem',
                   methods:{
                     e(){                                     //2.在子組件中定義一個e方法,e方法中使用this.$emit('方法名',‘參數’)調用fun方法
                         this.$emit('fun','我在調用父組件方法');    
                     }
                   }
               }

           }
       })
    </script>
</body>

  

1.自定義方法: fun(在子組件調用),調用父組件方法:funparent
2.在子組件中定義一個e方法,e方法中使用this.$emit('方法名',‘參數’)調用fun方法
3.綁定事件觸發子組件的e方法


免責聲明!

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



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