组件分装基本原则是：高内聚，低耦合，易读写，可复用
组件也分：业务组件和公共组件
vue里的封装：两种一种自定义组件，一种是自定义指令
一、自定义组件
1. 代码层面： HTML（结构）+ JS（逻辑） + CSS（样式）
2. 使用层面： 需求配置参数 + 实例化相应组件对象
组件传参：方式
1、传函数，传数值，传方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://sv-source.zt-express.com/gongdan/js/vue.min.js"></script>
<style>
.emotion-box {
/* margin: 0 auto; */
width: 300px;
height: 100px;
box-sizing: border-box;
padding: 5px;
background: #fff;
border: 1px solid #eee;
overflow: hidden;
overflow-y: auto;
}
.emotion-box-line {
display: flex;
}
.emotion-item {
flex: 1;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<!-- <c :fetch-method ="funEmoji" :list="list" :height="height" @emotion="emotion" :show="show"></c>
<input type="text" v-model ="value" @input = "show =true"> -->
<bobo :fetch_method ="funEmoji" :list="list" :height="height" @change="emotion" :show="show" :value="value"></bobo>
<!-- 传函数或值 -->
</div>
</body>
<script src="emoji.js"></script>
<script>
Vue.component("bobo",{
props:{
list:{
type :Array,
required: true
},
height:{
type :Number,
default:400,
},
show:{
type:Boolean,
default:true
},
value:{
type:String
},
fetch_method:{
type:Function
}
},
data() {
return {
}
},
template:
`<div>
<c :list="list" :height="height" @emotion="emotion" :show="show"></c>
<input type="text" v-model ="value" @focus = "show =true">
</div>
`,
methods:{
emotion(x){
this.$emit('change', x)
},
fun(val){
setTimeout(()=>{
alert(val)
},2000)
}
},
mounted(){
this.fetch_method("str",this.fun)
}
})
Vue.component("c",{
props:{
list:{
type :Array,
required: true
},
height:{
type :Number,
default:400,
},
show:{
type:Boolean,
default:true
}
},
data() {
return {
}
},
template:
`<div>
<div class="emotion-box" :style="{height: height + 'px' }" v-if="show">
<div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
<jos class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)">{{item}}</jos>
</div>
</div>
</div>
`,
methods: {
clickHandler(i) {
console.log(i)
const emotion = `[${i}]`
this.$emit('emotion', emotion)
}
},
})
Vue.component("jos",{
name: 'ly-emotion',
data:function(){
return{
name:"jos"
}
},
template:
`
<div class="ly-emotion" >
<slot></slot>
</div>
`,
mounted() {
const name = this.$el.innerHTML
const list = emojiData.emojiFontData
const index = list.indexOf(name)
const imgHTML = `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif">`
this.$nextTick(() => {
this.$el.innerHTML = imgHTML
})
}
})
var app=new Vue({
el:"#app",
data:{
name:"son",
value :"",
list: [
['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴'],
['睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过'],
['酷', '囧', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢'],
['饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂'],
['疑问', '嘘', '晕', '疯了', '衰', '骷髅', '敲打', '再见'],
['擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠'],
['鄙视', '委屈', '快哭', '阴险', '亲亲', '吓', '可怜', '菜刀'],
['西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰'],
['凋谢', '嘴唇', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀'],
['足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强'],
['弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你'],
['NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈'],
['磕头', '回头', '跳绳', '右太极', '激动', '乱舞', '献吻', '左太极', '投降']
],
height:500,
show:false
},
methods:{
funEmoji(str,fun){
setTimeout(()=>{
console.log("x")
alert('请求接口')
this.show =true
}, 2000)
fun("做事")
},
emotion(x){
console.log(x)
this.value += x
this.show =false
}
}
})
</script>
</html>
一、自定义指令
这是给了我们操作dom的空间，在这里我们可以通过面向对象的方式定义。（几乎都是一些低级的dom操作）
传值方式
1、点的形式，冒号，括号里
