Vue3.0父子组件传值详解

一、Vue父子组件传值属性

在Vue中，父组件向子组件传值是一种很基础的要求，下面我们来看一个简单的例子，通过props属性实现父组件向子组件传递数据：

// Parent.vue
<template>
  <Child :message="hello"></Child>
</template>
<script>
  import Child from './Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        hello: 'Hello, child!'
      }
    }
  }
</script>

// Child.vue
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    name: 'Child',
    props: {
      message: String
    }
  }
</script>

上述代码中，我们在父组件中定义了一个名为hello的数据，并将其通过:绑定到子组件的message属性上。在子组件中，我们通过props属性定义了一个名为message的属性，并指定其类型为String。

需要注意的是，在Vue中，使用props属性定义的属性都是单向绑定的，也就是说，当父组件更新了这个属性的值时，子组件的值也会更新，但是反过来是不行的。如果需要实现双向数据绑定，需要使用v-model指令或者自定义事件。

二、Vue父组件向子组件传值

在Vue3.0中，父组件向子组件传值的方法与Vue2.x相同，可以使用props属性来实现。

三、Vue子传父组件传值

1、通过$emit自定义事件

在Vue中，子组件向父组件传值可以通过自定义事件实现。具体步骤如下：

在子组件中，通过$emit方法触发一个自定义事件，并将需要传递的数据作为参数传入。
在父组件中，通过v-on指令监听子组件触发的自定义事件，同时在事件处理函数中获取子组件传递的数据。

下面我们来看一个简单的例子：

// Parent.vue
<template>
  <div>
    <Child @myEvent="handleMyEvent"></Child>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import Child from './Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      handleMyEvent(data) {
        this.message = data
      }
    }
  }
</script>

// Child.vue
<template>
  <div>
    <button @click="$emit('myEvent', 'Hello, parent!')">传递数据给父组件</button>
  </div>
</template>
<script>
  export default {
    name: 'Child'
  }
</script>

上述代码中，我们在子组件中定义了一个名为myEvent的自定义事件，并在点击按钮时通过$emit方法触发了这个事件，并将字符串’Hello, parent!’作为参数传递给了父组件。在父组件中，我们通过v-on指令监听了子组件触发的myEvent事件，同时在事件处理函数handleMyEvent中获取了子组件传递的数据，并将其赋值给了message。

2、通过$attrs和$listeners实现

在Vue3.0中，除了使用$emit方法触发自定义事件，还可以通过$attrs和$listeners来实现子组件向父组件传递数据。

$attrs是一个包含了父作用域中不作为prop被识别（且获取）的特性绑定（class和style除外）的对象。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定（class和style除外），并且可以通过v-bind=”$attrs”传递给一个内部组件。例如：

// Parent.vue
<template>
  <div>
    <Child v-bind="$attrs" v-on="$listeners"></Child>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import Child from './Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      handleMyEvent(data) {
        this.message = data
      }
    }
  }
</script>

// Child.vue
<template>
  <div>
    <button @click="$emit('myEvent', 'Hello, parent!')">传递数据给父组件</button>
  </div>
</template>
<script>
  export default {
    name: 'Child'
  }
</script>

四、Vuex子组件向父组件能传值

在Vue中，除了使用自定义事件或者$attrs和$listeners来实现子组件向父组件传递数据之外，还可以使用Vuex来实现这个功能。

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，包括state、getters、mutations和actions等，使得不同组件之间可以共享状态，从而实现更加有效的通信和协作。

下面我们来看一个简单的例子，使用Vuex实现子组件向父组件传递数据：

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  }
})

// App.vue
<template>
  <div>
    <Child />
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import Child from './Child.vue'
  import store from './store'
  
  export default {
    name: 'App',
    components: {
      Child
    },
    computed: {
      message() {
        return store.state.message
      }
    }
  }
</script>

// Child.vue
<template>
  <div>
    <button @click="setMessage">传递数据给父组件</button>
  </div>
</template>
<script>
  import store from './store'
  
  export default {
    name: 'Child',
    methods: {
      setMessage() {
        store.commit('setMessage', 'Hello, parent!')
      }
    }
  }
</script>

上述代码中，我们首先创建了一个名为store的Vuex Store实例，并定义了一个名为message的状态。在父组件中，我们通过computed属性定义了一个名为message的计算属性，并在模板中使用它来显示message的值。在子组件中，我们通过import引入了store，然后在点击按钮时通过commit方法触发了一个mutations，从而实现了修改message的值的功能。

五、Vue3父子组件传值

在Vue3.0中，父子组件传值的原理与Vue2.x是相同的，但是在语法上有所变化。需要注意的是，在Vue3.0中，props属性的写法与Vue2.x是不同的。

在Vue3.0中，我们可以使用defineProps函数来定义子组件的props属性：

// Child.vue
<template>
  <div>{{ message }}</div>
</template>
<script>
  import { defineProps } from 'vue'
  
  export default {
    name: 'Child',
    setup(props) {
      const { message } = defineProps({
        message: String
      })
      
      return { message }
    }
  }
</script>

// Parent.vue
<template>
  <Child :message="hello"></Child>
</template>
<script>
  import Child from './Child.vue'
  
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        hello: 'Hello, child!'
      }
    }
  }
</script>

上述代码中，我们在子组件中使用defineProps函数来定义了一个名为message的属性，并指定了它的类型为String。在父组件中，我们通过:绑定的方式将hello数据传递给子组件的message属性。

需要注意的是，在Vue3.0中，props属性是不可变的，也就是说，如果你尝试在子组件中修改props属性的值，程序会报错。如果需要在子组件中修改父组件的数据，应该使用$emit方法触发自定义事件或者通过Vuex实现。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/249339.html