$emit
子組件 <template> <button @click="emitEvent">點擊我</button> </template> <script> export default { data() { return { msg: "我是子組件中的數據" } }, methods: { emitEvent(){ this.$emit('my-event', this.msg) //通過按鈕的點擊事件觸發方法,然后用$emit觸發一個my-event的自定義方法,傳遞this.msg數據。 } } } </script>
父組件 <template> <div id="app"> <child-a @my-event="getMyEvent"></child-a> <!--父組件中通過監測my-event事件執行一個方法,然后取到子組件中傳遞過來的值--> </div> </template> <script> import ChildA from './components/child.vue' export default { components: { ChildA }, methods: { getMyEvent(msg){ console.log('接收的數據--------->'+msg)//接收的數據--------->我是子組件中的數據 } } } </script>
$refs
子組件 <template> <button>點擊我</button> </template> <script> export default { methods: { emitEvent(msg){ console.log('接收的數據--------->'+msg)//接收的數據--------->我是父組件中的數據 } } } </script> 父組件 <template> <div id="app"> <child-a ref="child"></child-a> <!--用ref給子組件起個名字--> <button @click="getMyEvent">點擊父組件</button> </div> </template> <script> import ChildA from './components/child.vue' export default { components: { ChildA }, data() { return { msg: "我是父組件中的數據" } }, methods: { getMyEvent(){ this.$refs.child.emitEvent(this.msg); //調用子組件的方法,child是上邊ref起的名字,emitEvent是子組件的方法。 } } } </script>