vue2父子组件传值有哪些

百变鹏仔 2个月前 (10-30) #前端问答

文章标签父子

vue 2 父子组件传值有如下几种方式：props（自上而下）：父组件通过 props 传值给子组件。$emit（自下而上）：子组件通过 $emit 事件向父组件发送数据。provide/inject（隐式父子通信）：父组件提供值，子组件注入该值。vuex（状态管理）：父子组件共享 vuex 中的数据。ref（模板引用）：父组件通过 ref 获取子组件实例。

Vue 2 父子组件传值方式

Vue 2 中父子组件传值有多种方式，包括：

1. props（自上而下）

2. $emit（自下而上）

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

3. provide/inject（隐式父子通信）

4. Vuex（状态管理）

5. ref（模板引用）

选择合适的方式

选择合适的传值方式取决于具体的场景和数据类型：

示例

props（父组件）

<template><child-component :message="message"></child-component></template><script>  export default {    data() {      return {        message: 'Hello from parent!'      }    }  }</script>

props（子组件）

<template><p>{{ message }}</p></template><script>  export default {    props: ['message']  }</script>

$emit（子组件）

<template><button>Send Data</button></template><script>  export default {    methods: {      emitData() {        this.$emit('sendData', { name: 'John' })      }    }  }</script>

$emit（父组件）

<template><child-component></child-component></template><script>  export default {    methods: {      receiveData(data) {        console.log(data)      }    }  }</script>

文章推荐

vue2父子组件传值有哪些

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗