<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="vue.js"></script>
<script>
//子组件2
//第一步:生子2 挂子往App里挂, 不需要挂Vue里
let Vheader = {//对象
data(){
return {}
},
//第一步(传值的 ): 子组件挂载父组件的属性props 挂载之后就可以在子组件内部使用父组件传过来的数据了*****
props:["msg","post"],
//template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****
//第三步(传值):展示父组件传来的值
template:`
<div>
<h2>生子是在子组件中</h2>
<h2 style="color:red">挂子和用子是在父组件中</h2>
<h3>{{msg}}</h3>
<h3>{{post.title}}</h3>
</div>
`,
};
//第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
//组件中的data必须是个函数,一定要有返回值
let App = { //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data() {
// 父-->子传值 通过props 属性
// post传入一个对象的多个属性
return {
text: "我是Vheader的父组件,想把数据传过去",
post:{
id:1,
title:"My journey with Vue"
}
}
},
//第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
//在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
// 第三步:用子2 <Vheader></Vheader>, 下一步去对应模板Vheader的template里写内容
//第二步(传值的): 父组件中通过v-bind绑定自定义属性, 在Vheader定义自定义的属性 :msg 这个msg一定是跟子组件里的props:["msg"]一样***
// 传入一个对象的多个属性用post
template: `
<div id="a">
<Vheader v-bind:msg="text" v-bind:post="post"></Vheader>
</div>
`,
//给子组件定义方法 比如说a标签的超链接
methods:{
},
components:{
// 第二步:挂子2
Vheader
},
}
new Vue({
el: "#app", //绑定根元素 是上面的id="app"
data() {
return {msg: "alex"}
},
components: {
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App
}
})
</script>
</body>
</html>
