Vue.js 是一款流行的前端框架，它有着许多优秀的特性。其中，组件化开发是 Vue.js 最为重要的一项特性之一，也是使得 Vue.js 得以快速开发 Web 应用程序的重要因素。在组件化开发的过程中，父子组件之间的传值是十分常见的需求。本文将详解 Vue.js 父子组件之间的传值方式，并提供相应的示例代码。
父组件向子组件传值
在 Vue.js 中，父组件向子组件传值的方式有两种：props 和 $emit，下面我们将分别介绍这两种方式的实现。
props
props 是 Vue.js 中专门用于从父组件向子组件传递数据的属性，其使用方式如下：
在父组件中，我们可以通过 v-bind 指令向子组件传递数据，例如：
// javascriptcn.com 代码示例
<template>
<child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: 'Hello, Vue!'
}
}
}
</script>在子组件中，我们可以通过 props 属性接收父组件传递来的数据，例如：
// javascriptcn.com 代码示例
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>$emit
在 Vue.js 中，父组件可以通过 $emit 方法触发一个子组件中自定义的事件，并传递相应的数据，如下所示：
在父组件中，我们可以调用子组件中定义的自定义事件，并传递数据，例如：
// javascriptcn.com 代码示例
<template>
<div>
<child @set-message="setMessage"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: ''
}
},
methods: {
setMessage(msg) {
this.message = msg
}
}
}
</script>在子组件中，我们需要使用 $emit 方法触发一个自定义的事件，并将数据传递给父组件，例如：
// javascriptcn.com 代码示例
<template>
<div>
<button @click="setMessage">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
setMessage() {
this.$emit('set-message', 'Hello, Vue!')
}
}
}
</script>子组件向父组件传值
在 Vue.js 中，子组件向父组件传值的方式有两种：$emit 和 $parent，下面我们将分别介绍这两种方式的实现。
$emit
与父组件向子组件传值相反，子组件也可以通过 $emit 方法触发一个父组件中自定义的事件，并传递相应的数据，如下所示：
在父组件中，我们需要在子组件标签上注册一个自定义事件，并在相应的方法中接收子组件传递过来的数据，例如：
// javascriptcn.com 代码示例
<template>
<div>
<child @set-message="setMessage"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: ''
}
},
methods: {
setMessage(msg) {
this.message = msg
}
}
}
</script>在子组件中，我们需要使用 $emit 方法触发一个自定义的事件，并将数据传递给父组件，例如：
// javascriptcn.com 代码示例
<template>
<div>
<button @click="setMessage">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
setMessage() {
this.$emit('set-message', 'Hello, Vue!')
}
}
}
</script>$parent
在 Vue.js 中，每个组件都有 $parent 属性，它指向该组件的父组件，因此在子组件中可以通过 $parent 属性访问父组件的数据或方法。
在父组件中，我们需要定义一个方法，让子组件可以调用该方法，并将数据传递给父组件，例如：
// javascriptcn.com 代码示例
<template>
<div>
<child></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: ''
}
},
methods: {
setMessage(msg) {
this.message = msg
}
}
}
</script>在子组件中，我们需要通过 $parent 属性访问父组件的方法，并将数据传递给父组件，例如：
<template>
<div>
<button @click="$parent.setMessage('Hello, Vue!')">Click Me</button>
</div>
</template>总结
通过以上的介绍，我们可以知道在 Vue.js 中，父子组件之间通过 props 和 $emit 方法以及 $parent 属性可以灵活地实现数据的传递。在实际开发中，需要根据业务需求选择合适的传值方式。
示例代码：
// javascriptcn.com 代码示例
<!-- Parent.vue -->
<template>
<div>
<child :msg="message" @set-message="setMessage"></child>
<button @click="setMessageFromParent">Set Message From Parent</button>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
message: ''
}
},
methods: {
setMessage(msg) {
this.message = msg
},
setMessageFromParent() {
this.$refs.child.setMessageFromParent('Message from parent')
}
}
}
</script>// javascriptcn.com 代码示例
<!-- Child.vue -->
<template>
<div>
<div>Message from parent: {{ messageFromParent }}</div>
<div>Message from child: {{ messageFromChild }}</div>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
data() {
return {
messageFromChild: '',
messageFromParent: ''
}
},
methods: {
setMessageFromParent(msg) {
this.messageFromParent = msg
},
setMessageFromChild() {
this.messageFromChild = 'Message from child'
this.$emit('set-message', this.messageFromChild)
}
}
}
</script>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6538e0687d4982a6eb20406d