Vue 组件传参

1.props 2. $emit 3. $root.eventHub 4.vuex 5. refs 6. $children

1：父传子 props

• 父发送参数：

<template>
<div>
  <div id="app">
    <!-- 向子组件传递信息 -->
    <helloWorld msg='hello world'></helloWorld>
  </div>
</div>
</template>

<script>
//引入组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
   
  name:'Fujian',
  components:{
   
    HelloWorld
  }
     
};
</script>

• 子组件接收参数：

<template>
  <div class="hello">
    <h1>
      <!-- 显示父组件传过来的参数 -->
      {
   {
   msg}}  
    </h1>
  </div>
</template>

<script>
export default {
   
  name: 'HelloWorld',
  // 使用props接收参数
  props: {
   
    msg: String  // 值为字符串
  }
}
</script>

1. 子传父 $emit

• 子组件发送传参：

<template>
  <div class="hello">
    <!-- 点击按钮后给父组件传参 -->
    <button @click="send"> 向父组件发送</button>
  </div>
</template>

<script>
export default {
   
  name: 'HelloWorld',
  data(){
   
    return{
   
        msg: '我是子组件内容a'
    }
  },
  methods: {
   
    send(){
   
        this.$emit('getchild',this.msg,'我是子组件内容b')
    }