vue组件传值的五种方法,vue 组件之间传值几种方式

一、Vue自定义组件

组件是可复用的 Vue 实例，且带有一个名字。组件的出现是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应对的组件即可。
1.在项目的components里面新建一个组件
（建议组件名字大写防止与标签相撞）

2.在组件.vue的script里面写上name

3. 在app.vue里面导入 app.vue属于全局配置
js中先引入组件

4.引用完一定记得有使用不然会报错在template里面使用一下组件

二、Vue组件组件传值

图解：

1.父传子
父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。
①使用props建立数据通道的渠道

// 这是父组件<div id="app">// 这是子组件 <child message="hello" ></child></div>

②在子组件中通过props传递过来的数据

Vue,component('child',{ props:['message'] })

2.子传父
子组件可以通过 e m i t 触发父组件的自定义事件。 v m . emit触发父组件的自定义事件。vm. emit触发父组件的自定义事件。vm.emit(event,arg) 用于触发当前实例上的事件；
①子组件中需要一个点击事件触发一个自定义事件

<template> <div> 子组件: <span>{{childValue}}</span>  <input type="button" value="点击触发" @click="childClick"> </div></template><script> export default { data () { return { childValue: '我是子组件的数据' } }, methods: { childClick () { // childByValue是在父组件on监听的方法 // 第二个参数this.childValue是需要传的值 this.$emit('childByValue', this.childValue) } } }</script>

②在父组件中的子标签监听该自定义事件得到传递的值

<template> <div> 父组件: <span>{{name}}</span> <br> <br>  <child v-on:childByValue="childByValue"></child> </div></template><script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子组件传过来的值 this.name = childValue } } }</script>

3.非父子传值
非父子组件之间传值，需要一个公共的vue来进行传递值和获取值，作为中间仓库来传值，不然路由组件之间达不到传值的效果