Vue中抽离组件后父子组件间的传值

Vue中父子组件间的传值

简言：

• 在学习Vue全家桶之Vuex之前，首得搞明白Vue在组件中的数据传递，其中包括：
  1. 路由协议传参
  2. 父子组件传值
• 现在，简单的介绍父子组件传值

一、父子组件的传值

1.父组件向子组件传值

• 首先有一个父组件Parent.vue

<template>
  <div>
    <son></son>
  </div>
</template>

<script>
import Son from './Son' //组件抽离，需要import导入，用来注册组件

export default {
  name: "Parent",
  data() {
    return {
      info: {
        name: '小爱同学',
        age: 18
      }
    }
  },
  components:{//注册子组件
    Son
  }
}
</script>
<style scoped>
</style>

• 其次有一个子组件Son.vue

<template>
  <div>
    <h3>{{send.name}}、{{ send.age }}</h3>
  </div>
</template>

<script>
export default {
  name: "Son",
  data() {
    return {
      msg: '这是子组件信息'
    }
  },
  props: ['send'],  //看下面第二大步骤的第二步骤
  methods: {}
}
</script>
<style scoped>
</style>

2. 到这里简单的实例就有了，现在需要将父组件中info传递给子组件

• 第一步：

在父组件中，在组件son上通过v-bind绑定一个属性<son :send="info"></son>
//send为绑定的属性，info为需要传递的参数

• 第二步：在子组件中增加props:['send']，【看上面的代码的注释】

此时就可以通过<h3>{{send.name}}、{{ send.age }}</h3>来取值了。

2.子组件向父组件传值

• 同样，需要通过事件绑定进行传值，但需要注意点有两个

1. 在子组件中，通过this.$emit('父组件上的绑定事件名'，子组件传递的数据)
2. 在父组件上拿到子组件传递来的数据时，需要将绑定事件的名字绑定在注册在父组件中的子组件上，其实不难理解。例如：

在子组件中：我们在子组件上增加一个button按钮来点击发送数据给父组件，（不用的话，可以通过生命周期钩子来触发）

  template中： `<button @click="sendmsg">发送数据给父组件</button>`
  data中：	  `data() {return {msg: '这是子组件信息'}},`
  methods中：  `methods: {sendmsg() {this.$emit('parents', this.msg);}}`
  重点就是：点击触发一个sendmsg()函数，在函数中通过$emit传递参数，其中parents为父组件
  		   中给组件son上绑定的事件。

---

在父组件中：通过给<son @parent=""></son>绑定事件来获取数据

  template中：`<son :send="info" @parents="showsonmsg"></son><span>{{ sonmsg }}</span>`
  data中：  	  `sonmsg: ''`
  methods中：  `showsonmsg(data) {this.sonmsg = data}`	
  重点：父组件通过在son中绑定了事件@parents，通过它将子组件的值传递给一个函数进行处理

这样就完成了父子组件的传值了！！