前端基础之《Vue（6）—组件基础（2）》
接上一篇。
七、v-model深入学习
<html>
<head><title>组件基础-4</title><style>.score {display: inline-block;}.score>span {display: inline-block;width: 25px;height: 25px;background: url(./assets/star.png) center center / 25px 25px;cursor: pointer;}.score>span.on {background: url(./assets/star-on.png) center center / 25px 25px;}</style>
</head>
<body><div id="app"><h1>售后评分</h1><score-1 v-model.number='speed'>配送速度：</score-1><br><score-1 v-model.number='service'>服务质量：</score-1><br><score-1 v-model.number='exp'>用户体验：</score-1><br><textarea name="" id="" cols="30" rows="3" v-model.lazy='desc'></textarea><br><button @click='submit'>提交</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 评分组件Vue.component('score-1',{template: `<div class="score"><slot name='default'></slot><span v-for='(i, index) in 5' v-bind:class='{on: value>=i}' v-on:click='$emit("input", i)'></span><slot name='xxx'></slot></div>`,props: {value: {type: Number, default: 0}}})const app = new Vue({el: '#app',data: {speed: 0,service: 0,exp: 0,desc: ''},methods: {submit() {// 提交接口入参const data = {speed: this.speed,service: this.service,exp: this.exp,desc: this.desc}console.log('提交评价', data)}}})</script></body>
</html>
1、在组件中，可以把
<score-1 v-bind:value="num" v-on:input='num = $event'>写成
<score-1 v-model='num'>2、在组件中，v-model='num' 等于 v-bind:value='num' + v-on:input='num = $event'
是一个语法糖，相当于这两个的简写。
3、自定义组件，除了封装（可维护），还可以复用（快速开发）
4、v-model对不同的表单来讲是不一样的
（1）对text和textarea文本表单，v-model 等于 v-bind:value + v-on:input
（2）对checkbox和radio选择框，v-model 等于 v-bind:checked + v-on:change
（3）对select下拉框，v-model 等于 v-bind:value + v-on:change
八、简单案例：封装一个弹窗组件
1、代码
<html>
<head><title>组件基础-5</title><style>.layer {background: rgba(0, 0, 0, 0.6);position: absolute;top: 0;bottom: 0;left: 0;right: 0;transition: all ease 0.1s;}.modal {position: absolute;top: 100px;left: 50%;width: 500px;margin-left: -260px;border-radius: 3px;background: white;}header {line-height: 50px;box-sizing: border-box;padding: 0 20px;font-size: 14px;overflow: hidden;border-bottom: 1px solid #eee;}.title {float: left;}.close {float: right;cursor: pointer;}main {box-sizing: border-box;padding: 20px;font-size: 14px;}footer {line-height: 50px;border-top: 1px solid #eee;overflow: hidden;height: 51px;}footer>span {float: right;height: 30px;line-height: 28px;margin-right: 20px;cursor: pointer;padding: 0 20px;margin-top: 10px;font-size: 12px;border: 1px solid #ccc;border-radius: 2px;}footer>span.primary {border-color: blue;background: blue;color: white;}</style>
</head>
<body><div id="app"><button @click='show=true'>修改</button><tc-modal title="修改用户信息" @close='onClose' @submit='onSubmit' :show='show'><div><span>用户名：</span><input type="text" v-model="name"/></div></tc-modal></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- 视图结构 --><script type="text/x-template" id="modal"><div class='layer' v-if='show'><div class='modal'><header><span class='title' v-text='title'></span><span class='close' @click='$emit("close")'>X</span></header><main><slot>主体区域</slot></main><footer><span class='primary' @click='$emit("submit")'>确定</span><span @click='$emit("close")'>取消</span></footer></div></div></script><script>// 封装弹窗组件Vue.component('tc-modal', {template: '#modal',props: {title: {type: String, default: '标题'},show: {type: Boolean, default: false}}})const app = new Vue({el: '#app',data: {name: '',show: false},methods: {onClose() {console.log('---关闭')this.show = falsethis.name = ''},onSubmit() {console.log('---提交', this.name)//这里可以调接口this.show = falsethis.name = ''}}})</script></body>
</html>
2、说明
自定义属性，给你一个属性
自定义事件，给你一个事件
自定义插槽，给你一块视图结构