Vue 父子組件之間傳值

———————————————父組件傳子組件—————————————————————

父組件

<DeviceUpdate :childImgUrl="childImgUrl"/>

import DeviceUpdate from './devicearrivecheckdetail-upload'

export default {

    components: {

  DeviceUpdate

    },

data () {

      return {

childImgUrl:"父組件向子組件傳值"

  }

}

}







子組件

<template>

{{childImgUrl}}

</template>




export default {

  props:{

  childImgUrl:{

  type:String,

  required:true

  }

  }

}
———————————————子組件傳父組件—————————————————————


父組件

<DeviceUpdate @getMessage="getVal"/>

import DeviceUpdate from './devicearrivecheckdetail-upload'

export default {

    components: {

		  DeviceUpdate

    },

	methods: {

        getVal(msg){

	      this.dataForm.acceptImgUrl +=msg;

	    }

	}

}







子組件

<template>

	{{childImgUrl}}

</template>




export default {

  	methods: {

  		function(){

  			this.$emit('getMessage',this.fileListUrl);

  		}

  	}
}