父子组件之间的传值

最新推荐文章于 2024-06-29 14:48:29 发布

热爱编程的小灰灰

最新推荐文章于 2024-06-29 14:48:29 发布

阅读量130

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gongxinhui89/article/details/128262287

版权

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>