父?jìng)髯?/h3>
父組件 Father.vue
<template>
<div>
<big-img :imgSrc="imgSrc"></big-img>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
imgSrc: "圖片地址"
};
},
components: {
'big-img': Son
}
};
</script>
<style scoped>
</style>
子組件 Son.vue
<template>
<div>
<img :src="imgSrc">
</div>
</template>
<script>
export default {
props: ['imgSrc'],//接收父組件傳過來的圖片地址
data(){
return{
}
}
}
</script>
<style scoped>
</style>
子傳父
子組件 Son.vue
<template>
<div @click="imgMessage">
<img :src="imgSrc">
</div>
</template>
<script>
export default {
props: ['imgSrc'],
methods: {
imgMessage() {
this.$emit('toFatherMessage',"這張圖片真好看")
}
}
}
</script>
<style scoped>
</style>
父組件 Father.vue
<template>
<div>
<big-img @toFatherMessage="viewImg" :imgSrc="imgSrc"></big-img>
<p>{{imgText}}</p>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
imgSrc: "圖片地址",
imgText:""
};
},
components: {
'big-img': Son
},
methods:{
viewImg(data){
this.imgText=data;
}
}
};
</script>
<style scoped>
</style>
