父子组件之间的传值

最新推荐文章于 2025-08-02 14:19:41 发布

原创最新推荐文章于 2025-08-02 14:19:41 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文通过一个具体的Vue.js示例介绍了如何实现父组件向子组件传递数据，并且子组件如何触发父组件的方法来更新数据。展示了使用props进行数据传递及$emit触发事件的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父子组件之间的传值

index.vue(父组件)

<template>
  <div>
    <!--使用组件   子组件-->
    <add ref="addRef" :str="str" @reset="reset"/>
  </div>
</template>

<script>
import add from './component'
export default {
  name: "apply",
  components: {
    add,
  },
  data() {
    return{
      str: '向子组件所传的值'
    }
  },
  watch: {},
  created() {
  },
  methods: {
    reset(value) {
      this.str = value;
    }
  }
}
</script>

component.vue（子组件）

<template>
  <div>
    <div>{{str}}</div>
    <button @click="change">点击调用父组件中的方法</button>
  </div>
</template>

<script>
export default {
  name: "component",
  //引入父组件向子组件传的值
  props:  {
    str: Array,
  },
  emits: ['reset'],
  data() {
    return{}
  },
  watch: {},
  created() {
  },
  methods: {
    //调用父组件，并且向父组件传值
    change() {
      this.$emit('reset', '改变子组件的值')
    }
  }
}
</script>