Vue父子模版传值及组件传值的三种方法

下面是“Vue父子模版传值及组件传值的三种方法”的完整攻略：

1. 父子模板传值

1.1 props

Vue中通过使用props来实现父子组件之间传递数据的功能。在父组件中，通过定义属性的方式将需要传递的数据绑定在子组件上；在子组件中，通过props选项来声明需要绑定哪些属性，最终父组件的数据会通过props传递给子组件。

下面是一个使用props传递数据的示例：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ChildComponent :msg="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      title: '父子组件传值示例',
      message: '这是从父组件传递的数据'
    }
  }
}
</script>

在父组件中，我们定义了一个data属性message，存储了需要传递给子组件的数据。然后通过在子组件上绑定msg属性，将message属性的值传递给子组件。

在子组件中，可以通过props选项来声明需要绑定哪些属性，这里我们声明了一个名为msg的属性。

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

在子组件中，我们使用{{msg}}语法来显示从父组件中传递过来的数据。

1.2 $emit

除了使用props来实现父子组件之间传递数据的功能，Vue还提供了方法$emit来实现父组件向子组件通信的功能。在父组件中，通过$emit方法来触发子组件中定义的自定义事件；在子组件中，通过定义自定义事件来接收父组件触发的事件。

下面是一个使用$emit传递数据的示例：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ChildComponent @sendMsg="receiveMsg" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      title: '父子组件传值示例',
      message: ''
    }
  },
  methods: {
    receiveMsg (msg) {
      this.message = msg
    }
  }
}
</script>

在父组件中，我们定义了一个data属性message，用来存储从子组件中接收到的数据。然后在子组件中使用@sendMsg监听子组件自定义事件sendMsg，在触发sendMsg事件的时候传递数据。

<template>
  <div>
    <button @click="send">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    send () {
      this.$emit('sendMsg', '这是从子组件传递的数据')
    }
  }
}
</script>

在子组件中，我们定义了一个按钮，并在按钮的点击事件中触发了自定义事件sendMsg，并传递了数据。

2. 组件传值

2.1 Provide & Inject

Vue中使用Provide & Inject来实现跨级组件之间传递数据的功能。在父组件中，通过定义provide选项来声明需要提供给子组件的数据；在子组件中，通过定义inject选项来声明需要注入哪些数据。

下面是一个使用Provide & Inject传递数据的示例：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ChildOne />
  </div>
</template>

<script>
import ChildOne from './ChildOne.vue'
export default {
  components: {
    ChildOne
  },
  provide () {
    return {
      message: '这是从父组件提供的数据'
    }
  },
  data () {
    return {
      title: 'Vue组件传值示例'
    }
  }
}
</script>

在父组件中，我们通过定义provide选项来提供数据给子组件。这里我们创建了一个名为message的provide属性，将需要传递的数据存储到message属性中。

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    msg () {
      return this.message
    }
  }
}
</script>

在子组件中，我们通过定义inject选项来声明需要注入哪些数据。这里我们声明了需要注入message属性，然后通过计算属性实现将message属性的值绑定到子组件的data属性中。

2.2 EventBus

Vue中可以通过EventBus来实现任意组件之间的传值。EventBus包含两个API：$on用于监听事件，$emit用于触发事件。

下面是一个使用EventBus传递数据的示例：

我们在一个新建的bus.js文件中定义了EventBus实例：

import Vue from 'vue'

export default new Vue()

在父组件中，我们引用了定义好的EventBus实例：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ChildOne />
  </div>
</template>

<script>
import ChildOne from './ChildOne.vue'
import bus from './bus'

export default {
  components: {
    ChildOne
  },
  data () {
    return {
      title: 'Vue组件传值示例'
    }
  },
  mounted () {
    bus.$on('message', (data) => {
      console.log(data)
    })
  }
}
</script>

在父组件中，我们通过引入定义好的bus.js文件，并在mounted函数中通过bus.$on监听了名为message的事件，打印传递过来的数据。

<template>
  <div>
    <button @click="send">发送消息</button>
  </div>
</template>

<script>
import bus from './bus'

export default {
  methods: {
    send () {
      bus.$emit('message', '这是从子组件传递过来的数据')
    }
  }
}
</script>

在子组件中，我们发送了一个名为message的事件，并传递了数据。

通过以上三种方法，我们可以轻松实现组件之间、父子组件之间的数据传递；同时也保证了组件的通用性，不同组件之间相互独立，非常适合Vue的组件化思想。