vue3学习第二课:组件和父组件的传递数据给子组件方式props

1,在conponents目录中新建header.vue

<template>
    <div>
        <h1>这是头部组件</h1>
    </div>
</template>

2,在App.vue中添加

<template>
  <div>
    <Header></Header>
    <Main></Main>
    <Footer :content="newcontent"></Footer>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Main from './components/Main.vue'
//命令式
//document.querySelector('h1').innerHTML='hello world'

//声明式
export default {
  name: 'App',
  data() {
    return {
      newcontent:"阿里云有限公司,欢迎光临"
    }
  },
  components: {
    Header,
    Footer,
    Main,
}
}
</script>
<template>
    <div>
        <h1>{{msg}}这是Main组件</h1>
    </div>
</template>
<script>
export default{
    data() {
        return {
            msg:"我来学vue3的---"
        }
    },
}
</script>

Footer.vue

<template>
    <div>
        <h1>这是底部部件{{ content }}</h1>
    </div>
</template>
<script>
export default {
    props:['content']
}
</script>

 效果图:

posted @ 2023-04-07 17:53  super_ip  阅读(140)  评论(0编辑  收藏  举报