<!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>