vue的组件基本使用方法
程序员文章站
2024-01-28 18:49:46
...
1、关于组件使用方法
ok废话不多说直接一个简单的组件实例带你快速使用组件。
//html代码
//单页面使用需要引入文件，这里引入的是cdn方式
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>
<body>
<div id="vue_practice">
<h2>组件的基本使用</h2>
<!-- 可用一个变量进行动态赋值。可直接赋值，值可以是数组、字符串、数组等等-->
<!-- 这里动态绑定的值只能是子组件里面props里申明的变量-->
<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: '<i style="display:block;margin:20px">{{ postTitle }}</i>'//组件模版
})
//父组件调用
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: '<div>{{content}}</div>'//模版
})
2、还可设置限制传递字符串的长度等等，validator属性
Vue.component('child',{
props: {
content: {
type: String,
//对传入属性通过校验器要求它的长度必须大于5，若是传值大于5会报错
validator: function(value){
return value.length > 5
}
}
},
template: '<div>{{content}}</div>'
})
//父组件就利用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: '<div @click="to">{{content}}</div>',//模版
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
就是在子组件设置一个插槽，而父组件就可随意在组件内部设置自己想要的内容，具体操作之后在补上
5、关于项目调用组件切记操作
1、首先需要引入组件例如
//XXXXX组件名字
import XXXXX from "@/xxx/xxxx/xxx";
2、需要对组件进行申明
export default {
components: { XXXXX, XXXXX, XXXXX },
}
例子均作者实操作过，简单使用组件还是够了的，之后会根据实际再补充。
上一篇： MySQL无法启动服务
下一篇： php关于$i++与++$i分析