vue基础--自定义组件

Posted 2021-03-21 mr-simple001

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>