vue3学习第二课：组件和父组件的传递数据给子组件方式props-526互联

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>

效果图：

typescript props vue3 vue