vue2.0中组件之间的信息传递

在vue2.0中父组件给子组件传递信息
父组件

import son from '../son/son.vue'
<template>
  <div class="father">
    <son :msg='msg'></son>
  </div>
</template>
<script>
export default {
  data() {
    return {
      'msg': '这是父组件的信息' 
    }
  },
  components: {
    son
  }
}
</script>

子组件

<template>
  <div class="son">
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  props: {//这里通过props接收父组件传过来的信息，可以制定数据类型
    msg: String
  }
}
</script>

总结

• 父组件导入子组件
• 父组件中注册子组件
• 把需要传递给子组件的值通过v-bind绑定在一个属性上
• 子组件通过props接收父组件传递过来的信息

在vue2.0中子组件给父组件传递信息
子组件

<template>
  <div class="son">
    <div @click='sendToParent'>点击发送数据</div>
  </div>
</template>
<script>
export default {
  methods:{
    sendToParent() {
      this.$emit('reciveMsg','这是传递给父组件的信息');
    }
  }
}
</script>

父组件

import son from '../son/son.vue'
<template>
  <div class="father">
    <son @reciveMsg='showMsg'></son>
  </div>
</template>
<script>
export default {
  methods:{
    showMsg(data) {
      console.log(data);//这里会输出 `这是传递给父组件的信息`
    }
  },
  components: {
    son
  }
}
</script>

总结

• 父组件导入子组件
• 父组件中注册子组件
• 父组件绑定一个自定义的事件，子组件点击的时候触发这个事件
• 父组件给自定义事件绑定一个函数，当触发这个自定义事件的时候，这个函数执行，同时会接受一个参数，这个参数就是从子组件传递过来的数据