子组件给父组件传数据

子组件给父组件传数据可以通过props和$emit两种方式实现。具体方法如下：

1.使用props方式传递数据：
在子组件中，需要在props中声明一个属性，然后在子组件中通过this.$emit()方法触发父组件中的事件，将数据传递给父组件。具体代码如下：

子组件my.vue的代码：

<template>
  <div>
    <p>{{msg}}</p>
    <!-- 给一个按钮触发传数据给父组件 -->
    <button @click="sendname">点击把子组件数据传给父组件</button>
  </div>
</template>

<script>
export default{
  name:'my',
  data(){
    return{
      msg:"这是子组件"
    }
  },
  props:['getname'],
  methods:{
    sendname(){
      this.getname(this.msg)
    }
  }
}
</script>

<style scoped>
div,p{
  background-color: blue;
}
</style>

在父组件中，需要在子组件标签上添加一个属性，将父组件中的方法传递给子组件。具体代码如下：

父组件中的代码：

<template>
  <div>
    <p>{{name}}</p>
    <!-- 子组件标签上添加getname属性，将父组件中的方法传递给子组件 -->
    <my :getname="getname"></my>
  </div>
</template>

<script>
import my from './components/my.vue'
export default{
  name:'app',
  data(){
    return{
      name:"这是父组件"
    }
  },
  components:{
    my
  },
  methods:{
    getname(val){
      console.log(val)
    }
  }
}
</script>

<style>
div,p{
  background-color: red;
}
</style>

2.使用$emit方式传递数据：
在子组件中，通过组件上的$emit触发my组件实例上的getname事件，将数据传递给父组件。具体代码如下：

子组件my.vue中的代码：

<template>
  <div>
    <p>{{msg}}</p>
    <!-- 给一个按钮触发传数据给父组件 -->
    <button @click="sendname">点击把子组件数据传给父组件</button>
  </div>
</template>

<script>
export default{
  name:'my',
  data(){
    return{
      msg:"这是子组件"
    }
  },
  methods:{
    sendname(){
      // 通过组件上的$emit触发my组件实例上的getname事件
      this.$emit('getname',this.msg)
    }
  }
}
</script>

<style scoped>
div,p{
  background-color: blue;
}
</style>

在父组件中，需要在子组件标签上添加一个事件监听器，监听子组件中触发的事件，并在父组件中定义一个方法来接收子组件传递的数据。具体代码如下：

父组件中的代码：

<template>
  <div>
    <p>{{name}}</p>
    <!-- 子组件标签上添加getname事件监听器，监听子组件中触发的事件 -->
    <my @getname="getname"></my>
  </div>
</template>

<script>
import my from './components/my.vue'
export default{
  name:'app',
  data(){
    return{
      name:"这是父组件"
    }
  },
  components:{
    my
  },
  methods:{
    getname(val){
      console.log(val)
    }
  }
}
</script>

<style>
div,p{
  background-color: red;
}
</style>