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") 向父组件报告自己的内部事件,在父组件当中,通过自定义事件
<child-comp v-bind="item" @changedComppText = "beChanged"></child-comp>
然后在methods中定义方法beChanged,从而实现父组件当中的数据变化,来同步实现子组件的数据变化。其中$emit还有第二个payload参数通知变化结果。