vue子父组件互相获取内容

<template>
  <div id="app">
      <afooter></afooter>
  </div>
</template>
<script>
import afooter from './components/children/footer'
export default {
  name: 'app',
  components:{
    afooter,
 
  }, 
}
</script>
<style lang="scss">
</style>
<template>
 <div id="afooter">
 </div>
</template>
<script>
export default {
    name:"afooter",  
}
</script>
<style lang='scss'>
</style>

子组件获取父组件的内容
App.vue声明methods 在header.vue的mounted中添加父组件已经声明过的方法
父组件获取子组件的内容
header.vue声明方法 在App.vue的mounted中添加子组件已经声明过的方法
vue子父组件互相获取内容_第1张图片
vue子父组件互相获取内容_第2张图片
其他设置
在App.vue中的header标签上添加说明
在这里插入图片描述
在这里插入图片描述
vue子父组件互相获取内容_第3张图片
其余import、components的添加
vue子父组件互相获取内容_第4张图片
data的添加
vue子父组件互相获取内容_第5张图片
header.vue中说明
在这里插入图片描述

完整代码
vue子父组件互相获取内容_第6张图片
vue子父组件互相获取内容_第7张图片

你可能感兴趣的:(vue子父组件互相获取内容)