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

子组件给父组件传递数据

父组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

子组件

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26