Vue组件：子组件与父组件直之间传值与方法调用

最新推荐文章于 2024-08-02 09:29:40 发布

老派程序员-胡侃码生

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量735

点赞数 1

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/it_laohu/article/details/124532801

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了父子组件间的数据传递方法，包括从父组件向子组件单向传值、通过props和$emit双向通信，以及子组件调用父组件方法的实例。通过实例演示了如何在Vue中使用props、ref和自定义事件实现数据交换。

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

父子组件之间数据交互有多种方式，这里简单介绍一下我用到的。

父组件向子组件传值

1、子组件中定义属性 ziData

<template>
<div>
  <h1>我是子标签</h1>
  <p>{{ziData}}</p>
</div>
</template>

<script>
export default {
  name: "ZiComponent",
// 子组件属性，用于接收父组件数据, props是单向绑定
  props:[
      "ziData"
  ]
}
</script>

<style scoped>

</style>

2、父组件给子组件的 ziData 赋值。这里修改 text 中的内容同时会修改子组件中的 ziData，传值方式：:zi-data="this.fuTextData"，具体代码如下：

<template>
  <div>
    <h1>我是父标签</h1>
    <input type="text" v-model="this.fuTextData"/>
    <ZiComponent :zi-data="this.fuTextData"></ZiComponent>
  </div>
</template>

<script>
import ZiComponent from "@/views/ZiComponent";
export default {
  name: "FuComponent",
  components:{ZiComponent},
  data() {
    return {
      fuTextData:null
    }
  }
}
</script>

<style scoped>

</style>

3、运行结果：

父组件调用子组件方法

1、子组件代码如下：

<template>
  <div>
    <h1>我是子标签</h1>
    <p>{{ ziData }}</p>
  </div>
</template>

<script>
export default {
  name: "ZiComponent",
  data() {
    return{
      ziData: null
    }
  },
  methods: {
    setZiDataFormFu(msg) {
      this.ziData = msg
    }
  }
}
</script>

<style scoped>

</style>

2、父组件调用子组件中的方法，需要再导入子组时添加 ref 属性进行映射，调用方式：this.$refs.setZiData.setZiDataFormFu(this.fuTextData)。具体代码如下：

<template>
  <div>
    <h1>我是父标签</h1>
    <input type="text" v-model="this.fuTextData" @change="setZiData"/>
    <ZiComponent ref="setZiData" ></ZiComponent>
  </div>
</template>

<script>
import ZiComponent from "@/views/ZiComponent";
export default {
  name: "FuComponent",
  components:{ZiComponent},
  data() {
    return {
      fuTextData:null
    }
  },
methods:{
  setZiData(){
    this.$refs.setZiData.setZiDataFormFu(this.fuTextData)
  }
}
}
</script>

<style scoped>

</style>

3、运行结果：

子组件修改父组件属性和调用父组件方法

修改属性我这里采用的是调用父类型中的方法来修改的，所以和调用方法就一起讲了。

调用方法分为有返回值和无返回值两种情况。

1、调用父组件方法使用的是 this.$emit('ziDataChange', this.ziData)，子组件代码如下：

<template>
  <div>
    <h1>我是子标签</h1>
    <input type="text" v-model="this.ziData" @change="ziDataChange2"/>
    <p>{{ fuData }}</p>
  </div>
</template>

<script>
export default {
  name: "ZiComponent",
  data() {
    return {
      ziData: null,
      fuData:null
    }
  },
  methods: {
    //没有返回值
    ziDataChange() {
      this.$emit('ziDataChange', this.ziData)
    },
    //有返回值
    ziDataChange2() {
      this.$emit('ziDataChange2', this.ziData,val=>{
        this.fuData=val
      })
    }
  }
}
</script>

<style scoped>

</style>

2、父组件需要添加子组件调用的事件：

<ZiComponent @ziDataChange2="ziDataChange2" ></ZiComponent>

代码如下：

<template>
  <div>
    <h1>我是父标签</h1>
    <p>{{ this.fuData }}</p>
    <ZiComponent @ziDataChange2="ziDataChange2" ></ZiComponent>
  </div>
</template>

<script>
import ZiComponent from "@/views/ZiComponent";
export default {
  name: "FuComponent",
  components:{ZiComponent},
  data() {
    return {
      fuData:''
    }
  },
methods:{
  ziDataChange(msg){
    this.fuData=msg;
  },
  ziDataChange2(msg,callback){
    this.fuData=msg;
    callback("我是父组件返回的信息："+msg);
  }
}
}
</script>

<style scoped>

</style>

3、运行结果：