四、vue基础--自定义组件
1.语法：Vue.component("组件名字",{data,template})，代码如下：
a. data： 必须是一个函数，有一个返回值。和vue里面的使用方法一样
b. template: 用来标示这个组件的渲染后的具体的代码
<div id='app'> <button-count></button-count> <button-count></button-count> <button-count></button-count> </div> <script> Vue.component("button-count",{ template:"<button @click='count+=1'>点击了{{count}}</button>", data:function(){ return{ count:0 } } }) new Vue({ el:'#app', data:{ } }) </script>
2.组件的属性是通过props定义的，可以是一个数组，直接写属性名字。也可以是一个对象，可以给每个属性定义约束，比如：type，required，default。组件中只能有一个根元素。代码如下：
<div id='app'> <blog-list :blogs="blogs"></blog-list> </div> <script> Vue.component("blog-list",{ //props:['blogs'] props:{ blogs:{ type:Array, required:true } }, template:` <table> <thead> <tr> <th>序号</th> <th>标题</th> </tr> </thead> <tbody> <tr v-for="(blog,index) in blogs"> <td>{{index+1}}</td> <td>{{blog.title}}</td> </tr> </tbody> </table> ` }) new Vue({ el:'#app', data:{ blogs:[{ title:"坏蛋是怎样练成的", content:"xxx" },{ title:"python基础", content:"ooo" }] } }) </script>
3.自定义组件添加事件：代码如下：
a.在需要触发事件的时候，调用this.$emit(事件名称,参数...)
b.在使用这个组件的时候，绑定事件，语法同html比如：@check-chenged
<div id='app'> <blog-itme v-for="blog in blogs" :blog=blog @check-changed="checkChanged"></blog-itme> <h1>选中的是：</h1> <div v-for="blog in selected_blogs"> {{blog.title}} </div> </div> <script> Vue.component("blog-itme",{ props:["blog"], template:` <div> <span>{{blog.title}}</span> <input type="checkbox" @click="onCheck"> </div> `, methods:{ onCheck(){ this.$emit("check-changed",this.blog) } } }) new Vue({ el:'#app', data:{ blogs:[{ title:"坏蛋是怎样练成的", id:"1" },{ title:"python基础", id:"2" }], selected_blogs:[] }, methods:{ checkChanged(blog){ // console.log(blog); //indexOf:获取某个元素在数组中的位置，如果返回非负数说明存在就是下标，反之不存在 let index = this.selected_blogs.indexOf(blog) if(index>=0){ this.selected_blogs.splice(index,1) }else{ this.selected_blogs.push(blog) } } } }) </script>
4.自定义组件v-model：计步器-->在配置中需要两个属性进行配置
a.event:代表什么情况下触发这个v-model行为
b.prop：代表传给v-model的那个变量，要绑定到那个属性上
c.调用this.$emit(model.event,计算后的结果)就可以了，代码如下：
<div id='app'> <Stepper v-model="goods_count"></Stepper> </div> <script> //计步器 Vue.component("Stepper",{ props:['count'], model:{ event:"count-changed", prop:"count" }, template:` <div> <button @click="sub">-</button> <span>{{count}}</span> <button @click="add">+</button> </div> `, methods:{ sub(){ this.$emit("count-changed",this.count-1) }, add(){ this.$emit("count-changed",this.count+1) } } }) new Vue({ el:'#app', data:{ goods_count:0 } }) </script>
5.自定义组件--插槽
a.插槽的用法是在组件的模板代码汇总，在指定的位置使用slot，以后在使用这个组件的时候，在组件中添加的内容都在slot的位置
b.作用区域：插槽中只能使用组件中的数据，只能从父组件中读取数据
c.默认值，可以填写一个默认值，使用的时候可以用默认值，也可以自己写值 代码如下：
<div id='app'> <chacao url="https://www.baidu.com/">百度</chacao> <div> <moren>哈哈</moren> <moren></moren> </div> </div> <script> Vue.component("chacao",{ props:['url'], template:` <div> <a :href="url">谷歌</a> <slot></slot> </div> ` }) Vue.component("moren",{ template:` <button> <slot>确定</slot> </button>` }) new Vue({ el:'#app', data:{ } }) </script>
6.自定义名称插槽：如果想要在自定义组件中定义多个插槽，就需要给插槽取个名字。
a.定义： <slot name="名称"></slot>
b.使用： <template v-slot:名称>XXX</template>
代码如下：
<div id='app'> <container> <template v-slot:header>这个是header</template> <template v-slot:body>这个是body</template> <template v-slot:footer>这个是footer</template> </container> </div> <script> Vue.component('container',{ template:` <div class="container"> <div> <slot name="header"></slot> </div> <div> <slot name="body"></slot> </div> <div> <slot name="footer"></slot> </div> </div> ` }) new Vue({ el:'#app', data:{ } }) </script>
7.自定义插槽作用域：
a.把不要给差插槽的变量绑定到slot上
b.在使用插槽的时候指定名称后，加上一个名称，绑定到slot上所有的属性可以通过这个名称获得 代码如下：
<div id='app'> <container> <template v-slot:header="headerprops"> {{headerprops.navs}} </template> <template v-slot:footer="footerprops"> {{footerprops.address}}/ {{footerprops.aboutus}} </template> </container> </div> <script> Vue.component("container",{ template:` <div> <div class="header"> <slot name="header" :navs="navs"></slot> </div> <div class="footer"> <slot name="footer" :address="address" :aboutus="aboutus"></slot> </div> </div> `, data:function(){ return { "address":"公司地址", "aboutus":"关于我们", navs:['网络设置','我的谁'] } } }) new Vue({ el:'#app', data:{ } }) </script>
