vue父子組件交互的幾種方式

第一、比較常見，也是經常用到的

1.父傳子

①父組件

<template>
	<div>
		我是父級
        <son :content="content"></son>
	</div>
</template>
<script>
import son from './son';
export default {
	components:{
		son
	},
    data(){
        return {
          content: "這是子級內容"
        }
    }
}
</script>

②子組件 

<template>
	<div>
		{{content}}
	</div>
</template>
<script>
export default {
	props:['content']
}
</script>

2.子傳父

①父組件

<template>
	<div>
		我是父級,{{content}}
        <son @change="change"></son>
	</div>
</template>
<script>
import son from './son';
export default {
	components:{
		son
	},
    data(){
        return {
          content: "這是我的內容"
        }
    },
    methods:{
        change(val){
            this.content=val;
        }
    }
}
</script>

②子組件

<template>
	<div @click="changeFather">點擊</div>
</template>
<script>
export default {
	methods:{
        changeFather(){
            that.$emit("change", "父組件內容被改變了");
        }
    }
}
</script>