2018-09-19 组件
2018-09-19 本文已影响0人
好多好多鱼z
组件(component)：
组件化开发 组件可以扩展 HTML 元素，封装可重用的代码 ，可以被连续调用。
分为
1.全局组件
2.局部组件
注： 组件名不可以使用已经存在的html元素 组件中的data数据是一个函数，并且要有一个返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-component",{
template:`
<ul>
<li>首页</li>
<li>关于</li>
<li>我们</li>
</ul>
`
})
new Vue({
el:'#app',
/* components:{
"my-component":{
template:`
<p>你好</p>
`
}
}*/
})
</script>
</body>
</html>
q.png
组件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<h1>Hello</h1>
<my-child ></my-child>
</div>
`
})
Vue.component("my-child",{
template:`
<p>你好</p>
`
})
new Vue({
el:"#app" ,
})
</script>
</body>
</html>
把子元素嵌套在父元素中 显示出父元素与子元素的值
w.png
组件中data是一个函数，并且要有一个返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<m></m>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("m",{
template:`
<div>
<h1>{{mess}}</h1>
<button @click="add">点击</button>
</div>
`,
data:function(){
return{
mess:"你好"
}
},
methods:{
add:function(){
alert("aa")
}
}
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
R.png
组件的嵌套父给子传(用prop属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("my-father",{
template:`
<div>
<my-tit v-bind:tit='title'></my-tit>
<my-fruit v-bind:fruList='list'></my-fruit>
</div>
`,
data:function(){
return{
list:['apple','pear','banana'],
title:'水果列表'
}
}
})
Vue.component('my-tit',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
Vue.component('my-fruit',{
props:['fruList'],
template:`
<ul>
<li v-for="value in fruList">{{value}}</li>
</ul>
`
})
new Vue({
el:"#app" ,
})
</script>
</body>
</html>
O.png
