<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方法