vue中父子组件如何传值

百变鹏仔 3个月前 (09-25) #VUE

文章标签父子

在 vue 中，父子组件传值可以通过以下方式实现：props 传值：父组件传递数据，子组件接收数据。事件监听：子组件触发事件，父组件监听事件并获取数据。

Vue 中父子组件传值

在 Vue 中，父子组件之间的传值是通过以下两种方式实现的：

一、props 传值

props 是父组件向子组件传递数据的单向数据流。

立即学习“前端免费学习笔记（深入）”；

<!-- 父组件 --><mycomponent :prop-name="prop-value"></mycomponent><!-- 子组件 --><template><p>{{ propName }}</p></template><script>export default {  props: ["propName"] // 子组件接收 props};</script>

二、事件监听

事件监听允许子组件向父组件发送数据。

<!-- 子组件 --><button world></button><!-- 父组件 --><mycomponent></mycomponent><script>export default {  methods: {    handleEvent(data) {      console.log(data); // 'Hello World'    }  }};</script>

注意：

文章推荐

vue中父子组件如何传值

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器