更多优质内容
请关注公众号

Vue使用(四) vue组件-张柏沛IT博客

正文内容

Vue使用(四) vue组件

栏目:Web前端 系列:Vue的简单使用系列 发布时间:2019-11-30 16:08 浏览量:2309

什么是组件

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

上面是官网对组件的定义,下面直接上代码

组件的基本使用

定义组件:

/先定义一个组件对象
let template = {
	props:['title','red_font'],  //这个是使用组件时要传入的参数
	template:`<div :class="{'red':red_font}">{{title}}</div>`
}

//注册这个组件
Vue.component('c1', template);  //全局注册,放在main.js中,第一参是组件名
//或者使用局部注册
new Vue({
	el:"#app",
	components:{
		'c1':template
	},
	data:{
		title:xxx,
		red_font:xxx
	}
});


调用组件:

<c1 :title="title" :red_font="red_font"></c1>


全局组件和局部组件

1.全局注册
到目前为止,我们只用过 Vue.component 来创建组件:

Vue.component('my-component-name', {
  // ... 选项 ...
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如:

//定义

//  #main.js
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })


//调用

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>


在所有子组件中都可以使用这3个子组件,这三个组件在各自内部也都可以相互使用。


2.局部注册

一般而言我们更多的使用局部注册

var ComponentA = { /* ...定义template和props属性 */ }
var ComponentB = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})


然后使用组件的时候

<component-a></component-a>

即可


接下来我们在vue脚手架项目中演示一下如何使用:

我们现在要定义一个组件 <com-a>

首先在 /src/components下定义一个ComA.vue 

<!-- #ComA.vue -->

<template>
    <div>
      <a href="https://www.baidu.com"></a>
    </div>
</template>

<script>
    export default {
      
    }

</script>


<style>
  
</style>

注意:<template>内必须有一个<div>标签包住你组件内的所有内容,不然会报错


子组件已经完成,要在根组件App.vue引入:
在 /src/App.vue 中:

<!-- # App.vue -->
<template>
  <div id="app">
    <com-a></com-a>     <!-- 使用组件 -->
  </div>
</template>

<script>
  import ComA from "@/components/ComA"   //引入ComA组件

export default {
  name: 'App',
  components:{
    ComA       //注册组件
  }
}
</script>

首先要引入组件
import ComA from "@/components/ComA"

然后注册组件
components:{
    ComA
  }
  
再使用组件
<com-a></com-a>

注册组件的名称是ComA的驼峰命名,使用组件时要转化为-


当然我们可以使用 is 属性动态使用组件
例如上面什么都不变,<com-a></com-a>改为:
<div is="com-a"></div>

效果相同,但是这样的好处是可以使用变量赋给is属性

<!-- # App.vue -->
<template>
  <div id="app">
    <div :is="ca"></div>     <!-- 使用组件 -->
  </div>
</template>

<script>
  import ComA from "@/components/ComA"   //引入ComA组件

export default {
  name: 'App',
  components:{
    ComA       //注册组件
  },
  data(){
      return {
        ca:"com-a"
      }
    }
}
</script>

这里的data要定义为方法而不能定义为属性


组件间的通信:


a.父组件传变量给子组件
可以通过在子组件中定义一个 props 属性,通过在父组件调用子组件标签的时候传递数据,数据会被传递到子组件的props中

例如:

在ComA.vue:

<!-- # ComA.vue -->
<template>
	<div>
		{{num}}
	</div>
</template>
<script>
export default {
	props:["num"]
}
</script>


在App.vue

<!-- # App.vue -->
<template>
  <div id="app">
    <com-a :num="num"></com-a>     <!-- 使用组件 -->
  </div>
</template>

<script>
  import ComA from "@/components/ComA"   //引入ComA组件

export default {
  name: 'App',
  components:{
    ComA       //注册组件
  },
  data(){
	return {
		num:100
	}
   }
}
</script>


其中 props 可以传数组或者对象

props:["a","b","c"]  //表示子组件中有a,b,c 3个变量

或者

props:{
    a:[String,Number]  //表示a变量限定了数据类型为字符串和数字
}

或者

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
  


b.子组件通过事件传递信息给父组件

ComA.vue :

<!-- # ComA.vue -->

<template>
    <div>
      <a href="https://www.baidu.com">百度一下你就知道</a>
      <button @click="emitMyEvent">触发事件</button>
    </div>
</template>

<script>
    export default {
      data(){
        return {
          myName:"zbp"
        }
      },
      methods:{
        emitMyEvent(){
          this.$emit("my-event",this.myName)   //这里的事件名my-event要写成-,不要写成驼峰
        }
      }
    }

</script>


<style>

</style>


这里意思是:点击按钮,触发emitMyEvent(),然后this.$emit("my-event",this.myName)表示,去触发一个叫my-event的事件,并且往这个事件里面的回调函数传参this.myName


在App.vue 中:

<template>
  <div id="app">
    <h2>我的名字是:{{name}}</h2>
    <com-a @my-event="getMyEvent"></com-a>
  </div>
</template>

<script>
  import ComA from "@/components/ComA"

  export default {
    name: 'App',
    components:{
      ComA
    },
    data(){
      return {
        name:""
      }
    },
    methods:{
      getMyEvent(param){
        this.name = param
      }
    }
  }
</script>

在父组件中 @my-event="getMyEvent" 表示监听my-event事件,一旦触发就调用getMyEvent事件,然后在这个事件中将上面的this.myName传到param参数,param再赋值给父组件的name变量

注意,组件的属性是大小写不敏感的,所以别用驼峰命名而是用-,如上面的my-event


c.在父组件中插入html代码传递给子模板

#在父组件中:

<com-a>   <!-- com-a 是所引用的子组件 -->
    <p>123</p>
</com-a>


#在子组件要用<slot></slot>标注要插在子组件的哪个地方

#子组件中

<template>
    <div>
     <a href="https://www.baidu.com">百度一下你就知道</a>
     <slot></slot>
    </div>
</template>

此时 <p>123</p>就会将子组件的<slot></slot>给替换掉,相当于将<p>123</p>插入到<slot>的位置


#slot标签中可以放一些默认值:

<template>
    <div>
     <a href="https://www.baidu.com">百度一下你就知道</a>
     <slot><span>默认内容</span></slot>
    </div>
</template>


# 还可以定义多个slot
 #父组件

<template>
    <com-a>
        <p slot="header">头部内容</p>
        <p slot="footer">尾部内容</p>
    </com-a>
 </template>
 

 
 #子组件

<template>
    <div>
     <a href="https://www.baidu.com">百度一下你就知道</a>
     <slot name="header">默认头部内容</slot>
     xxxxxxx
     <slot name="footer">默认尾部内容</slot>
    </div>
</template>


d.动态组件

之前举了一个例子

<div :is="ca"></div>


这种通过is的方式的就是动态组件
ca是一个变量,你可以改变ca的变量内容来做到组件的切换

<keep-alive>
    <div :is="ca"></div>
</keep-alive>

如果使用了keep-alive的话,切换过的组件会被缓存起来,当切换回来的时候就不会又加载一次



PS:在子组件中定义的<style>样式是在全局都有效的,如果想仅在该子组件有效,可以<style scoped>
加个scoped属性即可




更多内容请关注微信公众号
zbpblog微信公众号

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > Vue使用(四) vue组件

热门推荐
推荐新闻