Vue组件化设计中子向父传递数据的两种方式

最新推荐文章于 2023-09-15 21:30:03 发布

 K 

最新推荐文章于 2023-09-15 21:30:03 发布

阅读量338

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44887137/article/details/122904130

版权

本文介绍了在Vue.js中子组件如何向父组件传递数据的两种常见方法：一是通过props属性将父组件的函数传递给子组件，子组件调用该函数传递数据；二是使用自定义事件，子组件触发事件并将数据作为参数传递给父组件监听的方法。这两种方式在实际开发中都具有实用性。

摘要由CSDN通过智能技术生成

子组件向父组件传递数据的两种方式

一、子组件props获取

App组件：

<!-- 通过父组件向子组件传递函数、子组件props获取的方式实现：子组件向父组件传递数据 -->
        <Son :getSonName="getSonName" ></Son>

    methods: {
        getSonName(name){
            console.log("App收到名字：",name)
        }
    },

Son组件：

<template>
  <div class="customeve" >
      <h2>姓名：{{name}}</h2>
      <h2>性别：{{sex}}</h2>
      <button @click="sendSonName()" >点击传递名字给App</button>
  </div>
</template>

<script>
export default {
    name:'Son',
    props:['getSonName'],
    data() {
        return {
            name:'小明',
            sex:'男'
        }
    },
    methods: {
        sendSonName(){
            this.getSonName(this.name)
        }
    },
}
</script>

<style>
.customeve{
    background-color: #ddd;
}
</style>

二、绑定一个自定义事件

App组件：

<!-- 通过父组件给子组件绑定一个自定义事件实现：子组件向父组件传递数据 -->
        <Daughter @customEvent="getDaughterName" ></Daughter>

methods: {
        getDaughterName(name){
            console.log("App收到名字：",name)
        }
    },

Daughter组件：

<template>
  <div class="customeve" >
      <h2>姓名：{{name}}</h2>
      <h2>性别：{{sex}}</h2>
      <button @click="sendDaughterName()" >点击传递名字给App</button>
  </div>
</template>

<script>
export default {
    name:'Daughter',
    data() {
        return {
            name:'小红',
            sex:'女'
        }
    },
    methods: {
        sendDaughterName(){
            this.$emit('customEvent',this.name)
        }
    },
}
</script>

<style>
.customeve{
    background-color: #ddd;
}

</style>