为了扩展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>
网友评论