前言
vue的开发是以组件的形式来进行开发的，使用时对于vue的组件化思想是需要熟练掌握，那么vue中组件是如何进行封装的呢？，封装之后如何进行复用等问题需要进行学习
不清楚代码指令可参照vue的api:地址：https://cn.vuejs.org/v2/api/
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app" >
<span>{{ a }}</span>
<span>{{ b }}</span>
<!-- <a v-bind:href="url">百度一下</a> -->
<!-- <input type="button" value="按钮" v-on:click="a+=1"/>
--> <button v-on:click="happy">ceshi</button>
<button v-on:click="goto">嗨起来</button>
<my-component></my-component>
<my-cpn></my-cpn>
</div>
<template id='ceshi'>
<div>
<h3>模板抽离</h3>
</div>
</template>
</body>
<script type="text/javascript">
// var obj={a:1234};
//
// const cpn = Vue.extend({
// template: '<div><h2>测试构建一个组件</h2></div>'
// })
Vue.component('my-cpn',{
template: '#ceshi',
data() {
return {
title:"1232323"
}
}
})
Vue.component('my-component', {
data: function(){
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var vm = new Vue({
el: '#app',
data:{
a: "11",
b: "22"
},
methods:{
happy:function(){
alert("1232323123");
},
goto:function(){
alert("嗨起来");
}
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
});
// vm.$watch('a',function(newVal,oldVal){
// console.log(newVal,oldVal);
// })
// vm.$data.a="12323232323";
// // vm.b="b是否显示";
</script>
</html>
通过语法糖的方式进行全局注册
Vue.component('my-npc',{
template: '<div><h2>测试内容</h2></div>'
})
模板的抽离
1 通过template标签
<template id='ceshi'>
<div>
<h3>模板抽离</h3>
</div>
</template>
Vue.component('my-npc',{
template: '#ceshi'
})
组件是一个单独的功能模块的的封装，这个模块有自己的Html模板，也应该有属于自己的数据data
组件中的data必须是函数data()而且这个函数需要返回一个实例
Vue.component('my-cpn',{
template: '#ceshi',
data() {
return {
title:"1232323"
}
}
})
为什么组件中的data必须是一个函数呢？
用data()每次调用的时候都返回一个新的对象，多次调用就不会相互影响，如果相互影响的话，一个地方修改属性值所有调用的地方都会跟着变，就不能实现复用
评论区