首页 > 常见问题 > 正文

vue组件传值方式有哪些

DDD
发布: 2023-07-03 11:23:13
原创
1944 人浏览过

vue组件传值的方法:1、使用props传递数据,父组件通过HTML属性的方式将数据传递给子组件,子组件通过props来接收传递过来的数据;2、使用$emit触发事件传递数据,子组件使用$emit触发自定义事件,父组件通过v-on来监听子组件自定义事件;3、使用provide/inject进行跨层级传值,父组件通过provide提供数据,子组件中使用inject来接收数据。

vue组件传值方式有哪些

本教程操作环境:Windows10系统、dell g3电脑。

Vue组件之间的传值可以通过三种方式实现:props、$emit和provide/inject。

使用props传递数据:

在父组件中通过HTML属性的方式将数据传递给子组件。子组件通过props来接收父组件传递过来的数据。

父组件:

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>
登录后复制

子组件:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>
登录后复制

使用$emit触发事件传递数据:

在子组件中使用$emit来触发自定义事件,并将需要传递的数据作为参数传递出去。父组件中通过v-on来监听子组件的自定义事件,并获取传递的数据。

父组件:

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>
登录后复制

子组件:

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</script>
登录后复制

使用provide/inject进行跨层级传值:

在父组件中通过provide提供数据,然后在子组件中使用inject来接收数据。

父组件:

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>
登录后复制

子组件:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</script>
登录后复制

以上就是Vue组件传值的三种方式。根据具体场景和需求,可以选择适合的方式来进行组件之间的数据传递。

以上是vue组件传值方式有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:Vue,Vue组件,
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!