vue中局部組件的使用
阿新 • • 發佈：2018-12-01
字母 lan 定義 nts 渲染 class doctype .com 關系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{msg}} </div> <script src="vue.js"></script> <script> //如果僅僅是實例化vue對象, 既有el又有template,如果template中定義模板內容//那麽template模板的優先級大於el // 首先是有一個 APP根組件, 下面有三個子組件:header, aside, content //第一步: 聲子 Vue中組件的首字母要大寫, 跟標簽區分 //組件中的data必須是個函數,一定要有返回值 let App = { //跟的是一個對象 這個對象裏 就是除了下面的Vue中,el以外的所有屬性 data() { return {text: "我是子組件"} }, //第四步: 給子組件裏寫內容. 當前模板裏的標簽,只用當前數據屬性跟下面的根組件Vue沒有關系//在<h2>{{text}}</h2>中的{{text}}部分可以放頭部組件,內容組件和側邊欄組件 ************ template: ` <div id="a"> <h2>{{text}}</h2> </div> `, //給子組件定義方法 比如說a標簽的超鏈接 methods:{ }, } new Vue({ el: "#app",//綁定的是上面的id="app" data() { return {msg: "alex"} }, //與生命周期有關 //用模板字符串 //定義模板 // 第三步:用子 把<App />寫下面就是 用子 但是裏面的內容需要寫到上面子組件裏App裏 // template可以不用寫 但是要掛載到 el上去 template: ` <div class="app"> <App><App/> </div> `, components: { // 第二步: 掛子 父組件Vue裏不僅是可以掛載一個App,還可以掛載其他組件 App //如果key和value一樣,可以只寫App 替代App:App } }) </script> </body> </html>
局部組件的使用更改 以及全局組件的使用
<!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> //如果僅僅是實例化vue對象, 既有el又有template,如果template中定義模板內容 //那麽template模板的優先級大於el // 全局組件 *** 第一個參數是組件的名字,第二個參數是options // 全局組件聲明之後,可以再任意的組件裏使用, 放到別的組件之後,就成了別的組件的子組件了 // 使用內置組件slot進行分發 讓讓別的組件中的Vbtn按鈕顯示不同的名稱 ****** Vue.component("Vbtn",{ data(){ return {}}, template:`<button><slot>按鈕</slot></button> `, }) // 首先是有一個 APP根組件, 下面有三個子組件:header, aside, content //子組件2 //第一步:生子2 掛子往App裏掛, 不需要掛Vue裏 let Vheader = {//對象 data(){ return {} }, //template 是一個組件模板,一定要用一個根(父)元素包裹起來,所以一定要有一個div閉合**** template:` <div> <h2>生子是在子組件中</h2> <h2 style="color:red">掛子和用子是在父組件中</h2> <Vbtn></Vbtn> </div> `, } //第一步: 聲子 Vue中組件的首字母要大寫, 跟標簽區分 //組件中的data必須是個函數,一定要有返回值 let App = { //跟的是一個對象 這個對象裏 就是除了下面的Vue中,el以外的所有屬性 data() { return {text: "我是子組件"} }, //第四步: 給子組件裏寫內容. 當前模板裏的標簽,只用當前數據屬性跟下面的根組件Vue沒有關系 //在<h2>{{text}}</h2>中的{{text}}部分可以放頭部組件,內容組件和側邊欄組件 ************ // 第三步:用子2 <Vheader></Vheader>, 下一步去對應模板Vheader的template裏寫內容 template: ` <div id="a"> <h2>{{text}}</h2> <Vheader></Vheader> <Vbtn>登錄</Vbtn> <Vbtn>註冊</Vbtn> <Vbtn>提交</Vbtn> </div> `, //給子組件定義方法 比如說a標簽的超鏈接 methods:{ }, components:{ // 第二步:掛子2 Vheader }, } new Vue({ el: "#app", //綁定根元素 是上面的id="app" data() { return {msg: "alex"} }, //根組件中 可以把template刪除 直接在id = "app"的div中使用 // 子組件中的template 不能刪除,因為子組件中的結構最終會渲染到id="app"的div裏面<App></App> components: { // 第二步: 掛子 父組件Vue裏不僅是可以掛載一個App,還可以掛載其他組件 App //如果key和value一樣,可以只寫App 替代App:App } }) </script> </body> </html>
vue中局部組件的使用