vue2子组件数据，传递给父组件

方法一：propos实现

1.定义子组件

<template>
  <div class="hello">
    <h1>学生信息</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>性别：{{ sex }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>成绩：{{ gread }}</h2>
    <button @click="sendParent">点击给父子间传递姓名</button>
  </div>
</template>

<script>
//创建student子组件
export default {
  name: 'HelloWorld',
//引入父组件中定义的，用于子组件传递数据的函数
  props:['sendChildDate'],
  data(){
    return{
      name:'张三',
      sex:'男',
      age:18,
      gread:100
    }
  },
  methods:{
    sendParent(){
      //1 通过propos传递参数（name）
       this.sendChildDate(this.name)
    }
  }
}
</script>

<style scoped>
.hello{
  background: red;
  margin-left: 20px;
  margin-top: 10px;
  width: 260px;
}
</style>

2.定义父组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <!-- 通过propos传值 -->
  <!--  ：子组件发送数据调用的方法名=“父组件获取子组件数据的方法名”    -->
     <HelloWorld :sendChildDate="getChildDate"/> 
    <h1 >子组件传递过来的数据是：{{ childrenValu }}</h1>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  props:{},
  components: {
    HelloWorld
  },
  data(){
    return{
      childrenValu:''
//定义一个空变量，接受传递的数据
    }
  },
  methods:{
     getChildDate(name){
       this.childrenValu=name
       console.log(this.childrenValu);
     }
    
    }
  }
}
</script>

<style>
#app{
  background-color: bisque;
  width: 600px; 
}
</style>

方法二：组件通过emit传递

1.子组件

<template>
  <div class="hello">
    <h1>学生信息</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>性别：{{ sex }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>成绩：{{ gread }}</h2>
    <button @click="sendParent">点击给父子间传递姓名</button>
  </div>
</template>

<script>
//创建student子组件
export default {
  name: 'HelloWorld',
  //props:['sendChildDate'],
  data(){
    return{
      name:'张三',
      sex:'男',
      age:18,
      gread:100
    }
  },
  methods:{
    sendParent(){
      //1 通过propos传递参数
      // this.sendChildDate(this.name)

      //2.通过组件和emit传递数据('绑定的组件的名称'，需要传递的参数)
      this.$emit('myself',this.age,this.name,this.sex)
    }
  }
}
</script>

<style scoped>
.hello{
  background: red;
  margin-left: 20px;
  margin-top: 10px;
  width: 260px;
}
</style>

2.父组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <!-- 通过propos传值 -->
    <!-- <HelloWorld :sendChildDate="getChildDate"/> -->

    <!-- 自定义事件传值 -->
    <HelloWorld v-on:myself="myDefine"/>
    <h1 >子组件传递过来的数据是：{{ childrenValu }}</h1>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  props:{},
  components: {
    HelloWorld
  },
  data(){
    return{
      childrenValu:[]
    }
  },
  methods:{
    // getChildDate(name){
    //   this.childrenValu=name
    //   console.log(this.childrenValu);
    // }
    myDefine(age,name,sex){
      this.childrenValu=[age,name,sex]
    }
  }
}
</script>

<style>
#app{
  background-color: bisque;
  width: 600px; 
}
</style>

方法三：通过ref实现子传父

ref类似组件的标识（类似id），可以直接拿到该组件的实例对象

通过this.$refs.helloworld,去找到这个组件，然后通过$on绑定自定义事件

 

传入自定义事件名以及调用这个事件的函数。

-----此方法比较复杂但是灵活性高，可以设置定时器灵活的实现效果

mounted(){
    setTimeout(()=>{
      //三秒后调用，需要设置定时器
      this.$refs.helloworld.$on('myself',this.myDefine)
    },3000)
    
  }