vue组件传参

vue组件传参一共有三种类型，分别是父向子传参、子向父传参和兄弟之间传参。具体介绍如下：

1、父向子传参： 父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。父组件传递数据时，可以使用 v-bind 或简写的 ":"，子组件接收数据时，需要在 props 中声明接收的数据类型。示例代码如下：

父组件：

<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

也可以通过$refs向子组件传参，通过父组件调用子组件的方法来达到传参的目的，我这里通过点击事件触发传参，也可以通过其他方法事件。示例代码如下：

父组件：

<template>
  <div>
    <el-button @click="getData()"></el-button>
    <child-component ref="childs"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    getData() {
      this.$refs.childs.onLoad(this.msg)
    }
  }  
}
</script>

子组件：

<template>
  <div>
    <p>{{msgs}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msgs: ''
    }
  },
  methods: {
    onLoad(msg) {
      this.msgs = msg
    }
  }  
}
</script>

2、子向父传参： 子组件通过 $emit 触发一个自定义事件，并传递数据，父组件通过 v-on 监听这个自定义事件，并接收数据。示例代码如下：

子组件：

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

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', this.message)
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
    <p>接收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    receiveMessage(message) {
      this.receivedMessage = message
    }
  }
}
</script>

3、兄弟之间传参： 兄弟组件之间的传参需要借助一个共同的父组件，通过父组件作为中介来传递数据。具体实现方式有两种，一种是通过事件总线来实现，另一种是通过 Vuex 状态管理来实现。这里以事件总线为例，示例代码如下：

父组件（事件总线）：

<template>
  <div>
    <child-component-1></child-component-1>
    <child-component-2></child-component-2>
  </div>
</template>

<script>
import Vue from 'vue'
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  created() {
    Vue.prototype.$bus = this
  }
}
</script>

兄弟组件1：

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

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    sendMessage() {
      this.$bus.$emit('send-message', this.message)
    }
  }
}
</script>

兄弟组件2：

<template>
  <div>
    <p>接收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  created() {
    this.$bus.$on('send-message', message => {
        this.receivedMessage = message
    })
  }
}
</script>