tft每日頭條

 > 生活

 > vue子組件如何向父組件傳值

vue子組件如何向父組件傳值

生活 更新时间:2025-02-02 03:46:27

vue子組件如何向父組件傳值?<template> <!--綁定自定義事件--> <HelloWorld @custE="getCData"/> </template> <script> // 引入子組件 import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data() { return { } }, components: { // 注冊子組件 HelloWorld }, methods: { // 獲取子組件傳來的數據 getCData(value) { console.log(value); } } } </script> <style> body { margin: 0px; padding: 0px; } </style>,我來為大家科普一下關于vue子組件如何向父組件傳值?以下内容希望對你有幫助!

vue子組件如何向父組件傳值(vue中子組件使用emit向父組件傳值)1

vue子組件如何向父組件傳值

父組件代碼

<template> <!--綁定自定義事件--> <HelloWorld @custE="getCData"/> </template> <script> // 引入子組件 import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', data() { return { } }, components: { // 注冊子組件 HelloWorld }, methods: { // 獲取子組件傳來的數據 getCData(value) { console.log(value); } } } </script> <style> body { margin: 0px; padding: 0px; } </style>

子組件代碼

<template> <div class="hello" @click="twoE"></div> </template> <script> export default { data() { return { childData: 'childData111' } }, methods: { twoE() { // 使用$emit向父組件傳值 this.$emit('custE',this.childData); }, } } </script> <style scoped> .hello { width: 100px; height: 100px; background: red; } </style>

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved