本文将介绍vue中常见的组件传值方式，并通过一个实例来演示它们的用法。
props属性传值
在vue中，父组件可以通过props向下传递数据给子组件。子组件通过设置props选项来接收父组件传的值。props可以是任何类型的值，包括基本类型、对象或数组。首先，我们先创建一个父组件，命名为parent.vue，代码如下：
<template> <div> <h2>父组件</h2> <p>我是父组件的信息：{{parentinfo}}</p> <child :childinfo="parentinfo"></child> </div></template><script>import child from './child.vue'export default { name: 'parent', components: { child }, data() { return { parentinfo: '我是来自父组件的信息' } }}</script>
然后我们创建一个子组件，子组件的内容为：
<template> <div> <h2>子组件</h2> <p>我是子组件的信息: {{childinfo}}</p> </div></template><script>export default { name: 'child', props: ['childinfo']}</script>
在父组件中，我们通过把父组件的信息传递给子组件的childinfo属性来传递数据。父组件中我使用了父组件的数据来渲染自己的信息，也将它传递给子组件。
在子组件中，我们使用了props选项来接收来自父组件的数据。子组件中通过使用childinfo来渲染自己的信息，childinfo值来自父组件。
上述代码中，我们使用了props来传递数据，并在子组件中使用props来接收数据。通过这种方式实现组件之间的通信可以实现组件之间数据的共享，并且组件之间的数据状态可以单一管理。
$emit和$on方法传值在vue中，我们也可以使用emit方法和on方法进行组件通信。emit方法用于发送消息，on方法用于接收消息。这种方法通常在非父子关系的组件间使用。
首先，我们先创建一个vue实例，命名为event.vue，代码如下：
<template> <div> <h2>组件间事件通信示例</h2> <child></child> <grand-child></grand-child> </div></template><script>import vue from 'vue'import child from './child.vue'import grandchild from './grandchild.vue'export default { name: 'event', components: { child, grandchild }, created() { //使用$on监听来自子组件的事件 this.$on('sendmsg', function(message) { console.log('父组件接收到来自子组件的消息：' + message) }) }}</script>
我们在父组件中是通过$on方法监听事件的到来，并且在接收到事件之后打印消息。具体使用是在created声明周期钩子函数中实现的。
然后，我们来看子组件的代码实现：
<template> <div> <h3>子组件</h3> <button @click="handleclick">发送消息</button> </div></template><script>export default { name: 'child', methods: { handleclick() { //使用$emit发送事件 this.$emit('sendmsg', '我是来自子组件的信息') } }}</script>
这样，当在子组件中点击按钮时，将会触发$emit方法，用事件名“sendmsg”向父组件发送消息“我是来自子组件的信息”，父组件便可通过$on方法监听事件到来并完成相应的操作。
同样的，我们也可以实现非父子关系的任意两个组件之间的通信，这样的方法使得组件的触发事件和监听事件之间是松耦合的。通过使用emit和on方法，可以实现更为灵活的组件通信。
综上，组件间的通信也是vue开发中非常重要的一部分。熟练掌握各种传值方式是组件编写的基础。通过具体的代码实例，本文介绍了vue中常见的两种传值方式：props传值和$emit/$on传值。这些方法都能够有效地协调组件间的通信，提高代码的可复用性和组合性。
以上就是vue文档中的组件传值举例分析的详细内容。