vue项目自定义组件的基本使用方法-包括slot、组件传值
1、关于组件使用方法
ok废话不多说直接一个简单的组件实例带你快速使用组件。
//html代码
//单页面使用需要引入文件，这里引入的是cdn方式
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript">script>
<body>
<div id="vue_practice">
<h2>组件的基本使用h2>
<blog-post :post-title="post.title + ' by ' + post.author.name">blog-post>
<blog-post :post-title="'字符串'">blog-post>
<blog-post :post-title="{hhh:'ok'}">blog-post>
<blog-post :post-title="[123,234]">blog-post>
div>
body>
//子组件的建立
//组件名称一般使用驼峰命名（短横线也ok），父组件调用的时候使用短横线
Vue.component('blogPost', {
props: ['post-title'],//子组件向父组件传的值
template: '{{ postTitle }}'//组件模版
})
//父组件调用
var vue_practice = new Vue({
el: "#vue_practice",
data: {
//组件赋值
post: {
title: '组件的基本使用',
author: {
name: 'Yan_an_n'
},
},
},
});
效果图如下:
2、父组件和子组件区分
最开始我常常分不清概念到底哪个是父组件、哪个是子组件，后来发现区分其实很容易
父组件：就是调用方，毕竟是爸爸，还是可以对儿子进行调教的嘛哈哈
子组件：那当然就是被调用方啦，但是被调用方也是有自己骨气的，不是自己申明的属性，父组件也别想使用
3、组件传值
- 父组件向字组件传值（props），传值方式是利用属性传值
1、子组件可利用props设置默认值、传值类型、及一些验证
//子组件的设置
Vue.component('child',{
props: {
//对象形式设置传值的更多属性
content: {
type: String,//传值类型
required: false, //设置是否必须传递
default: 'default value' //设置默认传递值 -- 无传递时传递的默认值
}
},
template: '{{content}}'//模版
})
2、还可设置限制传递字符串的长度等等，validator属性
Vue.component('child',{
props: {
content: {
type: String,
//对传入属性通过校验器要求它的长度必须大于5，若是传值大于5会报错
validator: function(value){
return value.length > 5
}
}
},
template: '{{content}}'
})
//父组件就利用v-bind属性值的方式将值传给子组件
//模版里面
<child :content="prac"></child>
//script里面
var vue_practice = new Vue({
el: "#vue_practice",
data: {
prac:'父组件传值',
},
methods:{
cli_num(a){
this.aa = a;
alert(this.aa);
}
}
}
- 子组件向父组件传值（$emit），传值方式利用方法调用
//子组件申明
Vue.component('child',{
data:{
num:1
},
props: {
num:{
type: Number
}
},
template: '{{content}}',//模版
methods:{
to(){
this.num++;
this.$emit("has_num", this.num);
}
}
})
//使用方式@has_num即$emit使用方法
<child @has_num="cli_num" :num="aa"></child>
//父组件调用
//在方法里使用即可
var vue_practice = new Vue({
el: "#vue_practice",
data: {
aa:0
},
methods:{
cli_num(a){
this.aa = a;
alert(this.aa);
}
}
}
4、关于slot
就是在子组件设置一个插槽，而父组件就可随意在组件内部设置自己想要的内容，具体操作之后在补上
- 组件使用的时候加标签，调用组件的时候可以加任何东西，若是没加标签，调用组件内部价东西会被忽略
- slot使用的作用域，绑定的是父组件的数据
- slot可有默认值，同props设置一样，若是父组件没有传入内容则使用备用内容，否则用传入的数据即可
- 具名插槽，插槽有具体名称定义，其实没名称的slot，都默认为default，具名插槽得使用template去绑定才可以
- 具名插槽可使用缩写：v-slot:header 可以被重写为 #header
commanBanner组件
<div id="comman_banner">
<ul class="banner_list”>
<li v-for="list in bannerList" :key="list">
<a :href="list.url" target="_blank">{{list.name}}</a>
</li>
</ul>
<slot></slot>
<slot name=“title”></slot>
</div>
//组件调用
<comman-banner>
<i class="yu_icon_xinlogo"></I>
<!—具名插槽的使用!—>
<template v-slot:title>
<h1 class="title">Here might be a page title</h1>
</template>
</comman-banner>
- 作用域插槽：使用一个可以复用的模版替换已渲染元素，类似组件的props的用法
- 出现多个插槽，最好基于template去使用，否则作用域会混乱，而且一个组件里面只能有一个默认插槽否则也会混乱
<div id="left_banner”>
<!—其中leftBanner值是已知值!—>
<slot v-bind:left="leftBanner">
{{ leftBanner.lastName }}
</slot>
</div>
//用法1
<!—其中slotProps值是命名—>
<!—<template v-slot:default="slotProps”>!—>
<!—可以将default去掉!—>
<template v-slot="slotProps">
{{ slotProps.left.lastValue }}
</template>
//用法2，支持es6可以使用解构赋值
<template v-slot="{left:leftcontext}">
{{ leftcontext.lastValue }}
</template>
5、关于项目调用组件切记操作
1、首先需要引入组件例如
//XXXXX组件名字
import XXXXX from "@/xxx/xxxx/xxx";
2、需要对组件进行申明
export default {
components: { XXXXX, XXXXX, XXXXX },
}
报错
报错1：
Invalid value for option “components”: expected an Object, but got Array
原因：父组件引用编写有误，引入应该是用对象
//错误示例：
components:[
GoodsTemplate
]
//正确示例：
components:{
GoodsTemplate
}
例子均作者实操作过，简单使用组件还是够了的，之后会根据实际再补充。