假设我们有一个父组件是 App.vue，子组件是Header.vue
父组件->子组件
在App.vue中，主要通过在app-header上绑定属性
<template>
<div id="app">
<app-header v-bind:title="title"></app-header>
</div>
</template>
<script>
import Header from './components/Header'
export default {
name: 'App',
data(){
return {
title: 'this is my first vue'
}
},
//局部注册组件
components: {
"app-header": Header
}
}
</script>在Header.vue中，通过props获取对应的属性
export default {
name: 'Header',
props: {
title: {
type: string,
required:true
}
},
data () {
return {
}
}
}
</script>子组件->父组件
子组件使用$emit，第一个参数是事件，第二个是值
<template>
<div id="header">
<h1 v-on:click='changeTitle'>{{title}}</h1>
</div>
</template>
<script>
export default {
name: 'Header',
data () {
return {
title: 'Godfunc'
}
},
methods: {
changeTitle:function(){
this.title = 'i am changed';
this.$emit('titleChanged',this.title);
}
}
}
</script>父组件触发事件方法，接收参数
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle($event)"></app-header>
</div>
</template>
<script>
import Header from './components/Header'
export default {
name: 'App',
data(){
return {
}
},
methods: {
updateTitle: function(title){
this.title = title;
alert(title);
}
},
//局部注册组件
components: {
"app-header": Header,
}
}
</script>总结：父组件向子组件传递数据，是通过子组件的属性传递的；子组件向父组件传递数据时，是通过触发事件。