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>
效果图:
本文来自博客园,作者:super_ip,转载请注明原文链接:https://www.cnblogs.com/superip/p/17296923.html