vue系列之vue中的组件传值方法

目录

 一、父组件向子组件传值

1.以数组进行传递（常用）

2.接收数据同时限制：数据类型、默认值、必须性

 二、子组件向父组件传值

三、非父子组件的传值 

第一步：创建事件中心  eventBus.js

第二步：发送方组件中

第三步：接收方组件中

---

 一、父组件向子组件传值

 父组件代码如下：

<template>
  <div id="app">
        <h1>父组件</h1>
        <!-- 对子组件进行动态属性绑定 -->
        <person :name="name" :gender="gender" :age="age"></person>
  </div>
</template>

<script>
// 引入子组件
import person from './components/person.vue'

export default {
  components: {person},  // 注册子组件
  data(){
    return{
      name:'张三',
      gender:'男',
      age:18
    }
  }
}

</script>

---

 1.以数组进行传递（常用）

<template>
    <div id="person">
        <h1>子组件</h1>
        <p>姓名：{{ name }}</p>
        <p>性别：{{ gender }}</p>
        <p>年龄：{{ age }}</p>
    </div>
</template>
<script> 
export default {
    data(){
      return {}
    },
    
    // props是专门用来设置父组件向子组件传值的变量
    props:['name','gender','age']

}

---

2.接收数据同时限制：数据类型、默认值、必须性

<template>
    <div id="person">
        <h1>子组件</h1>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
    </div>
</template>

<script> 
export default {
    data(){
        return {}
    },

    // 接收数据的同时限制：数据类型、默认值、必须性
    // 注意 required 和 default 不可同时使用
    props:{
        name:{
            type:String,      // name传入类型必须是字符串
            required:true     // name设为必传字段
        },
        age:{
            type:Number,      // age传入类型必须是数值型
            default:20,       // 当父组件不传值时，设置默认值20
        },
    },
}
</script>

---

 二、子组件向父组件传值

 子组件代码如下：

<template>
    <div id="person">
       <h1>子组件</h1>
       <!-- 点击按钮向父组件传值 -->
       <button @click="sendData(name,age)">按钮</button>
    </div>
</template>

<script> 
export default {
    data(){
      return {
        name:'张三',
        age:18
      }
    },
    methods:{
      sendData(name,age){
        // this.$emit(传递的名字,传递的数据)
        // 当传递的值有多个时，用逗号隔开
        this.$emit('sendData',this.name,this.age)
      },
    }
} 
</script>

---

父组件代码如下： 

<template>
  <div id="app">
        <h1>父组件</h1>
        <!-- 监听子组件中的emit事件 -->
        <person @sendData="sendData"></person>
        <div>父组件接收到的数据：{{ persondata }}</div>
  </div>
</template>

<script>
// 引入子组件
import person from './components/person.vue'

export default {
  components: {person},  // 注册子组件
  data(){
    return{
      persondata:''
    }
  },
  methods:{
    // 父组件接收子组件消息的方法
    sendData(name,age){
      this.persondata=name+age
    }
  }
}

</script>

---

三、非父子组件的传值 

第一步：创建事件中心  eventBus.js

 要实现非父子组件的传值，需要一个事件中心（eventBus），即在组件的文件夹components中，创建eventBus.js文件，文件内代码如下：

// 导入一个vue对象
import Vue from 'vue'

// 抛出这个对象
export default new Vue()

---

第二步：发送方组件中

<template>
    <div id="left">
        <h1>发送方</h1>
        <button @click="goright">向right发送值</button>
    </div>
</template>
<script> 
// 导入eventBus
import eventBus from './eventBus';

export default {
    methods:{
        goright(){
            // 发送方
            // 使用eventBus.$emit定义一个名字，然后将数据存储在这个名字中
            eventBus.$emit('sendData',{name:'张三'},18)
        }
    }
}
</script>

---

 第三步：接收方组件中

<template>
    <div id="right">
       <div>这是left组件中传来的数据{{ getData }}</div>
    </div>
</template>

<script> 
// 导入eventBus
import eventBus from './eventBus';

export default {
    data(){
      return {
        getData:''
      }
    },
    methods:{
      getleftData(){  //该函数需要在生命周期中进行获取
        // 接收方
        // eventBus.$on来接受发送方的的数据，然后使用函数将发送的数据取出
        eventBus.$on('sendData',(name,age)=>{
          this.getData=name+age
        })
      }
    },
    created(){        // 在生命周期中调用
      this.getleftData()
    }
} 
</script>

---

以上就是vue中父子组件和非父子组件间传值的常用方法。