vue2.0 父子组件数据传递prop

vue的一个核心概念就是组件，而组件实例的作用域是孤立的，所以组件之间是不能直接引用其他组件的数据的。极端点举例来说，就是可以在同一个项目中，每一个组件内都可以定义相同名称的数据。

  data () {
    return {
      msg: "Hello Vue2.0.js"
    }
  }

　　比如每个组件我们都定义一个msg，当我们使用msg的时候，使用的都是各自组件内部的msg，而不会互相干扰。

　　而如果父子组件当中，如果需要实现数据的传递，父组件的数据需要通过 prop 才能下发到子组件中，子组件要显式地用props选项声明它预期的数据。

       <photo-item
          v-for="(item, index) in rightLists.item" 
          :key="item.id" 
          :item="item" 
          @del="del">
        </photo-item>

　　以<photo-item />子组件为例，在父组件当中调用<photo-item />  通过prop显示传递item，也就是“:item='item'”，在子组件当中，显示声明props

props: ["item"]

　　就可以获取到父组件传递过来的item对象，同时prop可以提供指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。

  props: {
      'item':{
        type: Object,
        required: true
      }
    },

　　使item成为一个对象，type指定传递过来的item数据类型，可以以数组方式指定多种数据类型，required指定是否为必传，default指定默认值，validator是自定义一个验证函数。

　　如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind。

<template>
    <child-comp v-bind="item"></child-comp>
</template>
import ChildComp from "./components/ChildComp.vue"
export default{
  data () {
    return {
      item: {
        text: "欢迎使用vue",
        version:"2.0"
      }
    }
  },
  components:{
    ChildComp
  },
}

　　此时在子组件当中，使用props显示接收的就是text和version，而与名义上的item已经没有什么关系了。

export default{
    props: ["text", "version"]
  }

　　在子组件当中如果需要改变父组件传递过来的数据，并且传递会去，则需要使用到vue 的自定义事件系统。

　　在子组件当中绑定事件，通过$emit通知父组件。

子组件的实现过程：

<template>
  <div @click="changeText">
  {{hello}}
<hr>
{{version}}
  </div>
</template>
<script>
  export default{
    data(){
      return{
        hello: this.text
      }
    },
    props: ["text", "version"],
    methods:{
      changeText(){
        this.hello = "我需要改变传递过来的text，并且通知父组件当中的数据";
        this.$emit("changedComppText")
      }
    }
  }
</script>

　　通过事件changeText，实现子组件的事件变化，在函数changeText内部通过 this.$emit("changedComppText") 向父组件报告自己的内部事件，在父组件当中，通过自定义事件

changedComppText来接收子组件报告过来的变化。

<child-comp v-bind="item" @changedComppText = "beChanged"></child-comp>

　　然后在methods中定义方法beChanged，从而实现父组件当中的数据变化，来同步实现子组件的数据变化。其中$emit还有第二个payload参数通知变化结果。