爲了擴展HTML元素，封裝可重用的代碼
組件的註冊方式：
a. 全局組件：
Vue.component來創建：
Vue.component('my-component-name',{
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
<body>
<div id="app">
<navbar></navbar>
<navbar></navbar>
<navbar></navbar>
<kerwin-tabbar></kerwin-tabbar>
</div>
<script>
//template 包含一個根節點
//組件是孤島，無法直接訪問外面的組件的狀態或者方法，間接的組件通信
//自定義的組件data 必須是一個函數
//7 所有的組件都在一起太亂了，--vue單文件解決
Vue.component("navbar",{
template:
`
<div style="background:red">
<button @click="handleBack()">返回</button>
<span>導航欄-{{myname}}</span>
<button @click="handleHome()">首頁</button>
<child></child>
</div>`,
methods:{
handleBack(){
console.log("返回按鈕");
},
handleHome(){
console.log("首頁")
}
},
watch:{
},
data(){
return{ myname:"chile-name"}
}
})
Vue.component("kerwinTabbar",{
template:`
<div style="background:red;">
kerwinTabbar
<child></child>
<tabbarchild></tabbarchild>
</div>
`,
components:{
//局部定義
"tabbarchild":{
template:`<div>tabbarchild</div>`
}
}
})
//定義一個孩子節點組件
Vue.component("child",{
template:`
<div>child</div>
`
})
new Vue({
el:"#app",
data:{
myname:"deefd"
},
methods:{
}
})
</script>
</body>
</html>
組件父傳子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<navbar :mymsg="msg"></navbar>
<navbar ></navbar>
<navbar ></navbar>
</div>
<script>
Vue.component("navbar",{
template:
`
<div style="background:red">
<button v-show="myshow" >返回</button>
<span >導航欄-{{mytitle}}--{{mymsg}}</span>
<button v-show="myshow">首頁</button>
</div>`,
// props:["mytitle","myshow"]//父組件傳遞的屬性，在這裏接收
props:{
mytitle:{
type:"String",
default:"默認名字"
},
myshow:{
type:Boolean,
default:true
},
mymsg:{
type:"String",
default:"3232"
}
}
});
//根組件
new Vue({
el:"#app",
data:{
msg:"323232"
},
});
</script>
</body>
</html>
子傳父
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
app
<child @myevent="handleEvent"></child>
</div>
<script>
Vue.component("child",{
template:`
<div style="background:yellow">child
child-<button @click="handleclick">click-child</button>
</div>
`,
data(){
return {
money:10000000
}
},
methods:{
handleclick(){
this.$emit("myevent",this.money)
}
}
})
new Vue({
el:"#app",
data:{
},
methods:{
handleEvent(data){
console.log("父組件中的定義",data);
}
}
});
</script>
</body>
</html>
父傳子是屬性
props:{
mytitle:{
type:"String",
default:"默認名字"
},
myshow:{
type:Boolean,
default:true
},
mymsg:{
type:"String",
default:"3232"
}
}
子傳父是事件
this.$emit()
ref傳遞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" ref="mytext" />
<button @click="handleadd">add</button>
<child ref="mychild"></child>
</div>
<script>
Vue.component("child",{
template:`
<div style="background: yellow">child--{{childname}}</div>
`,
data(){
return {
childname:"222222222"
}
}
})
new Vue({
el:"#app",
data:{
},
methods:{
handleadd(){
console.log(this.$refs.mychild.childname);
this.$refs.mychild.childname='98898';
}
}
});
</script>
</body>
</html>