Vue 组件使用记录

组件定义

<template>
  <div class="camera">
    <van-icon @click="takePhoto" name="photograph" class="btn" />
  </div>
</template>


<script>

export default {
  name: 'TakePhoto',

  props: [     // 有使用组件的地方，传入数据
    'examIndex',
  ],
  
  methods: {
    takePhoto: function() {
    	// 向父组件发送消息，并传递数据 imagePath
    	//  该数据 imagePath 可以会注入到事件函数的参数中
    	this.$emit("before-close", imagePath);
    },
  },
}
</script>

组件使用

showCamera 用于标注是否显示此组件
<take-photo 
  v-if="showCamera" 
  v-on:before-close="closeCamera" 
  :exam-index="0"
  ></take-photo> 


导入组件
import TakePhoto from './TakePhoto'

components: {
  TakePhoto
},

方法中添加：
closeCamera: function(imagePath) {
  alert(imagePath)
  this.showCamera = false;
},

总结

父组件向子组件传递数据用 props，注意变量的命名格式

子组件向父组件传递数据用 事件，自动注入到 函数的形参中

将页面组件化，便于维护和代码的重复利用率。