子组件给父组件传递数据（vue2）

原创于 2022-06-28 22:05:19 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue全家桶专栏收录该内容

35 篇文章

订阅专栏

本文展示了在Vue.js中如何实现子组件向父组件传递数据的示例。通过点击子组件的按钮，子组件修改其内部状态并触发`getSubItemInfo`事件，将数据传递给父组件。父组件监听该事件并接收到子组件传递的数据，从而实现双向通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件给父组件传递数据

父组件

<template>
  <div>hello PageTech-{{title}}
  <button @click="getTitle">getTitle</button>
  <InfoButon ref="infoButtonRef" @getSubItemInfo="getSubItemInfo" />
  </div>
</template>
<script>
import InfoButon from "./components/InfoButton/index.vue";
export default {
  name: 'PageTect',
  components:{
    InfoButon
  },
  data() {
    return {
      title: 'Title-title'
    }
  },
  // 
  mounted(){
    console.log('mounted');
  },
  methods:{
    getTitle(){
      // console.log('title',this.title,this);
      // 调用子组件方法
      this.$refs.infoButtonRef.cancelInfo();
    },
    getSubItemInfo(v){
      console.log('v',v);
    }
  }
}
</script>

子组件

<template>
  <div>
    <p>{{info}}</p>
    <button @click="cancelInfo">Cancel</button>
  </div>
</template>
<script>
export default {
  name: 'InfoButon',
  data(){
    return{
      info: 'ModifyInfo'
    }
  },
  methods:{
    cancelInfo(){
      console.log('cancelInfo',this);
      // 修改title
      this.info = 'Init-Info';
      // 向父组件传递数据
      this.$emit('getSubItemInfo',{name: 'TEXT'})
      
    }
  }
}
</script>