组件的讲解：
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
1.组件的使用
①组件分为全局组件
component("组件的名字"，{
template：``
})
列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
//全局组件
Vue.component("my-header",{
template:`
<ul>
<li>飞</li>
<li>飞</li>
<li>飞</li>
</ul>
`
})
</script>
</body>
</html>
②组件分为局部组件
new Vue({
el:"#app",
components:{
"组建的名字":{
template:`模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
//局部组件
new Vue({
el:"#app",
components:{
"my-header":{
template:`
<ul>
<li>贾晓飞</li>
<li>贾晓飞</li>
<li>贾晓飞</li>
</ul>
`
}
}
})
</script>
</body>
</html>
子传父组件
emit（）可以实现组件之间的传值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>{{num}}</h1>
<my-song @mag1="tele"></my-song>
</div>
`,
data:function(){
return{
num:""
}
},
methods:{
tele:function(texte){
this.num=texte
}
}
})
Vue.component("my-song",{
template:`
<button @click="btn">点击</button>
`,
data:function(){
return{
mag:"你好"
}
},
methods:{
btn:function(){
this.$emit("mag1",this.mag)
}
}
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
父传子组件
①全局组件传子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-header",{
template:`
<div>
<h2>贾晓飞</h2>
<my-header2 v-bind:age='mag'></my-header2>
</div>
`,
data:function(){
return{
mag:"你好"
}
}
})
</script>
</body>
</html>
②局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script>
new Vue({
el:"#app",
components:{
'my-header':{
template:`
<div>
<p>{{mag}}</p>
<button v-on:click="gae">按钮</button>
</div>
`,
data:function(){
return {
mag:"0"
}
},
methods:{
gae:function(){
this.mag++
}
}
}
}
})
</script>
</body>
</html>
网友评论