Vue组件化开发
组件化开发
入门案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--引入vue的支持文件-->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter',{
/*这里比较特殊，参数需要使用函数的方式返回，否则template部分接收不到*/
data:function () {
return {count:0}
},
/*组件template中必须只有一个根元素*/
template:'<button @click="add">点击了{{count}}次</button>',
methods:{
add:function () {
this.count+=1;
}
}
})
const vm = new Vue({
el:'#app',
data:{
}
});
</script>
</body>
</html>
组件的命名使用规范：
如果使用驼峰式命名组件，那么在使用该组件时，必须要转化成短横杠式的方式使用，否则报错，例如命名了一个‘HelloWorld’组件 使用的时候必须是‘hello-world’
局部组件和全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--引入vue的支持文件-->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter>
</button-counter>
<hello-world></hello-world>
<hello-tom></hello-tom>
</div>
<script type="text/javascript">
/*下面这个是全局组件*/
Vue.component('button-counter',{
/*这里比较特殊，参数需要使用函数的方式返回，否则template部分接收不到*/
data:function () {
return {count:0}
},
template:'<button @click="add">点击了{{count}}次</button>',
methods:{
add:function () {
this.count+=1;
}
}
})
/*下面这个是局部组件，
* 局部组件只能在注册他的父组件中使用，其他地方不能使用
* 如果局部组件被app组件注册的话，全局组件就不能使用下面的局部组件
*/
var HelloWorld={
data:function () {
return {msg:'hello-world'}
},
template: '<div>{{msg}}</div>'
}
var HelloTom={
data:function () {
return {msg:'hello-tom'}
},
template: '<div>{{msg}}</div>'
}
const vm = new Vue({
el:'#app',
data:{
},
components:{
'hello-world':HelloWorld,
'hello-tom':HelloTom
}
});
</script>
</body>
</html>
组件之间的数据交互
父组件向子组件传值
重点：父组件通过props属性向子组件传值，props是单向数据流，只允许父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!--引入vue的支持文件-->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<s-component :smsg="pmsg"></s-component>
</div>
<script type="text/javascript">
/*下面是子组件*/
Vue.component('sComponent',{
props:
['smsg'],
data:function () {
return {
msg:'子组件的信息'
}
},
template:'<div>{{msg+"-----------"+smsg}}</div>'
});
/*Vue实例对象相当于父组件*/
const vm = new Vue({
el:'#app',
data:{
pmsg:'父组件的信息'
}
});
</script>
</body>
</html>
子组件向父组件传值
重点：子组件通过自定义事件向父组件传递值
Slot插槽
作用：即通过在子组件中定义slot标签，然后可以在其父组件调用时将值插入到标签中。
