vue父子组件传值，父传子，子传父

1、父组件向子组件传值

现有两个父子组件，父组件为photoManager.vue，子组件为photoDetail.vue。并且处于同一文件夹下。

1.1、父组件的代码。

<template>
	<div>
		<photo-detail v-if="photoDetailDialogVisible" :id="id" :item="item"></photo-detail>
	</div>
</template>

<script>
import photoDetail from './photoDetail.vue';

export default {
  data () {
    return {
    	photoDetailDialogVisible: true,
    	id: '123456789',
    	item: {
    		name: '小明',
    		isFlag: true
    	}
    }
  },
  components: {photoDetail},
  methods: {
  	openPhotoDetailDialog () {
  		this.id = '000';
  		this.item.name = '小王';
  	}
  }
}
</script>

1.2、子组件的代码

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

<script>
export default {
  data () {
    return {
    	
    },
    props: ['id', 'item'],
  }
}
</script>

1.3、限制传递的数据类型

可以限制传递的prop数据类型，包括String、Number、Boolean、Array、Object、Function、Promise，若要限制数据类型，则子组件中代码如下：
此时，如果父组件中的数据不符合条件时会在控制台报错提示。

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

<script>
export default {
  data () {
    return {
    	
    },
    props: {
    	id: String,
    	item: Object
    },
  }
}
</script>

1.4、 父组件的值变化会同步到子组件

如果初始化子组件后调用了父组件中的openPhotoDetailDialog方法，子组件中的id与item.name也会同步改变，但是不允许在子组件中修改传递的值。

2、子组件向父组件传值

2.1、$emit事件

$emit触发当前实例上的事件。附加参数都会传给监听器回调。\ast \ast 方法参数\ast \ast ：$emit(eventName, […args]);
事件名/方法名：{string} eventName
要传递的参数：[…args]

2.2、子组件代码

<template>
	<button v-on:click="updateParentValue">点击传值</button>
</template>

<script>
export default {
  data () {
    return {
    	
    },
    methods: {
    	updateParentValue () {
    		this.$emit('updateParentValue', 'abcde');
    	}
    }
  }
}
</script>

2.3、父组件代码

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

<script>
export default {
  data () {
    return {
    	
    },
    methods: {
    	updateParentValue (childrenValue) {
    		console.log(childrenValue); // 'abcde'
    	}
    }
  }
}
</script>