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