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>