1. Python技术站首页
  2. 其他
  3. Vue

vue组件传值的11种方式总结

• Vue
yizhihongxing

下面是对于“vue组件传值的11种方式总结”的详细讲解攻略：

1. props

  • 父组件通过props向子组件传递数据。
  • 子组件通过props接收传递过来的数据。

示例代码如下：

父组件：

<template>
  <ChildComponent :message="parentMessage"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  data() {
    return {
      parentMessage: 'Hello world'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

2. provide/inject

  • 父组件通过provide向子孙组件传递数据。
  • 子孙组件通过inject获取传递过来的数据。

示例代码如下：

祖先组件：

<template>
  <ParentComponent></ParentComponent>
</template>
<script>
import ParentComponent from './ParentComponent.vue'
export default {
  provide: {
    message: 'Hello world'
  },
  components: {
    ParentComponent
  }
}
</script>

父组件：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

3. $emit

  • 子组件通过$emit向父组件传递数据。
  • 父组件通过v-on监听子组件的事件，并接收传递过来的数据。

示例代码如下：

父组件：

<template>
  <ChildComponent @send-message="receiveMessage"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  methods: {
    receiveMessage(message) {
      console.log(message)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello world')
    }
  }
}
</script>

4. v-model

  • 父组件通过v-model向子组件传递数据，并监听子组件的输入事件。
  • 子组件通过$emit向父组件传递数据。

示例代码如下：

父组件：

<template>
  <ChildComponent v-model="message"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  data() {
    return {
      message: 'Hello world'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>
<script>
export default {
  props: ['value']
}
</script>

5. $parent

  • 子组件通过$parent访问父组件。
  • 子组件通过$parent访问父组件的数据和方法。

示例代码如下：

父组件：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  data() {
    return {
      message: 'Hello world'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <button @click="$parent.showMessage">Show Message</button>
</template>

6. $children

  • 父组件通过$children访问子组件。
  • 父组件通过$children访问子组件的数据和方法。

示例代码如下：

父组件：

<template>
  <div>
    <button @click="showMessage">Show Message</button>
    <ChildComponent ref="childComponent"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  methods: {
    showMessage() {
      console.log(this.$refs.childComponent.message)
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world'
    }
  }
}
</script>

7. EventBus

  • 父组件和子组件通过EventBus进行数据通信。

示例代码如下：

<!-- EventBus.js -->
import Vue from 'vue'
export default new Vue()

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import EventBus from './EventBus.js'
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('send-message', 'Hello world')
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>
<script>
import EventBus from './EventBus.js'
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('send-message', message => {
      this.message = message
    })
  }
}
</script>

8. Vuex

  • 父组件和子组件通过Vuex进行数据通信。

示例代码如下：

<!-- store.js -->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    setMessage({ commit }, message) {
      commit('setMessage', message)
    }
  }
})

<!-- ParentComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['setMessage']),
    sendMessage() {
      this.setMessage('Hello world')
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['message'])
  }
}
</script>

9. $attrs/$listeners

  • 子组件通过$attrs/$listeners访问父组件的属性和方法。

示例代码如下：

父组件：

<template>
  <ChildComponent message="Hello world" @click="showMessage"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  methods: {
    showMessage() {
      console.log('clicked')
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ $attrs.message }}</div>
  <button @click="$listeners.click">Click Me</button>
</template>

10. provide/inject + $attrs/$listeners

  • 使用provide/inject和$attrs/$listeners结合可以实现祖先组件向后代组件传递数据，并访问后代组件的属性和方法。

示例代码如下：

祖先组件：

<template>
  <ParentComponent></ParentComponent>
</template>
<script>
import ParentComponent from './ParentComponent.vue'
export default {
  provide() {
    return {
      showMessage: this.showMessage
    }
  },
  methods: {
    showMessage() {
      console.log('clicked')
    }
  },
  components: {
    ParentComponent
  }
}
</script>

父组件：

<template>
  <ChildComponent></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

子组件：

<template>
  <div>{{ $attrs.message }}</div>
  <button @click="$attrs.showMessage">Click Me</button>
</template>

11. render函数

  • 使用render函数可以动态生成组件并传递数据。

示例代码如下：

<template>
  <div id="app"></div>
</template>
<script>
import Vue from 'vue'
new Vue({
  el: '#app',
  render(h) {
    return h('ChildComponent', {
      props: {
        message: 'Hello world'
      },
      on: {
        click: () => {
          console.log('clicked')
        }
      }
    })
  },
  components: {
    ChildComponent: {
      props: ['message'],
      render(h) {
        return h('div', this.message)
      }
    }
  }
})
</script>

以上就是关于“vue组件传值的11种方式总结”的详细攻略了，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue组件传值的11种方式总结 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue表单及表单绑定方法

    Vue表单及表单绑定方法是Vue框架中重要的一部分，用于维护表单中输入数据的状态，并将这些状态反映在视图中。本文将介绍Vue表单及表单绑定方法的完整攻略。 1. Vue表单基本概念 在Vue中表单通常指用户可以输入的数据。表单通常由各种表单控件组成，例如文本框、下拉框、单选框、复选框等。当用户在表单控件中输入数据时，Vue会自动建立起该表单的数据模型。 Vu…

    Vue 2023年5月27日
    00

  • 详解基于Vue+Koa的pm2配置

    下面我将详细讲解“详解基于Vue+Koa的pm2配置”的完整攻略。 一、背景说明 随着前端项目规模的扩大，对于前端项目的部署也变得越来越复杂。本攻略将介绍如何基于Vue+Koa来配置pm2，使得前端项目的部署得到更好的管理和控制。 二、pm2简介 pm2是一个进程管理器，可以管理和监控node.js应用程序。pm2可以通过命令行进行控制，可以通过pm2配置相…

    Vue 2023年5月28日
    00

  • vue.js实例对象+组件树的详细介绍

    “Vue.js实例对象+组件树的详细介绍”是Vue.js框架的基础内容之一，它关乎着构建整个Vue.js应用程序的基本理解。在本文中，我将详细介绍Vue.js实例对象和组件树的概念，以及如何创建和使用它们。 Vue.js实例对象 Vue.js实例对象是一个VM（ViewModel）的实例，VM是Vue.js框架的核心概念，它也是MVVM（Model-View…

    Vue 2023年5月28日
    00

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    我将会详细讲解“vue-cli 3.0自定义vue.config.js文件，多页构建的方法”的完整攻略。 什么是vue-cli 3.0？ vue-cli是一个官方的Vue.js脚手架，它可以快速搭建一个完整的Vue.js开发环境，提供了现代化的构建工具和工作流程。 自定义vue.config.js文件 在使用vue-cli 3.0开发项目时，我们可以通过自定…

    Vue 2023年5月28日
    00

  • vue3.0如何使用computed来获取vuex里数据

    下面是一份Vue3.0如何使用computed来获取Vuex里数据的攻略： 1. 简介 在使用Vue的过程中，经常遇到需要自动计算属性的情况，而Vuex作为Vue的全局状态管理工具，也经常用于存储应用程序的状态。在Vue3.0及以上版本中，可以使用computed选项来获取Vuex里的数据，并自动计算属性，非常方便。下面将为大家详细介绍vue3.0如何使用c…

    Vue 2023年5月28日
    00

  • 对vuex中store和$store的区别说明

    对vuex中store和$store的区别说明 在使用Vue框架开发应用时，如果需要进行状态管理，通常使用Vuex库。在使用Vuex时，我们经常会看到store和$store这两个概念，这两者之间有什么区别呢？ store store是Vuex的核心概念，它是一个数据存储的中心，用于管理着应用程序中的全部响应式状态。store中的状态是响应式的，这意味着当我…

    Vue 2023年5月27日
    00

  • Vue 搭建Vuex环境详解

    Vue 搭建Vuex环境详解 简介 Vuex是Vue.js的官方状态管理库，它可以更好的管理Vue.js应用中的数据流，包括数据的状态、存储和同步。社区中已经有很多文章介绍Vuex的基础使用，本文将详细讲解如何在Vue.js中搭建Vuex环境，并提供两个示例说明。 搭建Vuex环境 安装Vuex 在Vue.js项目中使用Vuex，需要先安装它。 npm in…

    Vue 2023年5月28日
    00

  • vue组件属性(props)及私有数据data解析

    Vue 组件属性 (Props) 解析 在 Vue 组件中，我们经常需要从父组件传递数据到子组件中，这时候就需要用到组件属性 (props)。组件属性是一种在组件之间传递数据的机制，它是从父组件向子组件传递数据的一种方式。在 Vue 中使用组件属性非常简单，只需要在子组件中声明属性名，并在父组件中传递数据即可。下面以一个示例说明： <!– 组件模板 …

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部