一、父组件向子组件传值
<template>
<div class="index">
<Header :ishidden="你好!我是父组件数据"/>
<Footer />
</div>
</template>
<script>
import Header from '../components/Header.vue'
export default {
data() {
return {
}
},
methods: {
},
components: {
Header
}
}
</script>
<template>
<div class="banner">{{ ishidden }}</div>
</template>
<script>
export default {
props:{
ishidden: ''
},
data: {
},
methods: {
}
}
</script>
二、子组件向父组件传值
<template>
<div class="child" @click="childClick"></div>
</template>
<script>
export default {
data() {
childValue: '我是子组件的数据'
},
methods: {
childClick() {
this.$emit('childValue', this.childValue)
}
}
}
</script>
<template>
<div class="index">
<Header :ishidden="true" v-on:childValue="childValue"/>
{{ name }}
</div>
</template>
<script>
import Header from '../components/Header.vue'
export default {
data() {
return {
name:""
}
},
methods: {
childValue: function(childValue) {
this.name = childValue;
}
},
components: {
Header
}
}
</script>