您的位置:

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中,子组件向父组件传值可以通过自定义事件实现。具体步骤如下:

  1. 在子组件中,通过$emit方法触发一个自定义事件,并将需要传递的数据作为参数传入。
  2. 在父组件中,通过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>

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

四、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实现。