1全局組件
-
組件樹
- solt 內置分發組件
- 應用見局部組件
2局部組件
2.1局部組件的使用:生子 - 掛子 - 用子
<!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>
2.2局部組件的使用更改 以及全局組件的使用
<!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>
`,
// template里的標簽必須有一個父標簽包裹
//給子組件定義方法 比如說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>