一、组件的创建
- 局部组件
1.建立一个文件,创建子组件
2.在主组件script标签内直接引入[import 自定义组件名 from "子组件路径"]
import topTitle from "./component/systemtoptitle";
3.注册组件 将子组件挂载在主组件上 在export default中 component属性中注册
//注册方式一:
components:{
//"自定义标签名": 引入时的自定义组件名
"v-toptitle":topTitle,
}
//注册方式二:
components:{
topTitle //引入时的自定义组件名
}
4.注册完成过后,使用组件
//注册方式一使用:
<v-toptitle></v-toptitle>
//注册方式二使用:
<topTitle></topTitle>
- 全局组件
1.建立一个文件,创建组件
2.在main.js中引入该组件 import 自定义组件名 from "组件文件路径"
import getTime from "./component/child/getTime"
3.注册 Vue.component("自定义标签名",引入时定义的组件变量名);
Vue.component("v-times",getTime);
//若没有单独定义全局组件文件时,则跳过上述步骤,直接写为
Vue.component("v-times",{
template:"<div>{{msg}}</div>", //组件模板
data(){
return{
msg:"times"
}
}
});
4.使用
<v-times></v-times>
二、组件间传值
-
父子组件传值
子组件定义props属性 接收父组件传递的值
1.方法一:这种方法对传递的数据类型没有要求
props:["logoimage","sysname"];
2.方法二:约束数据类型的方法
props:{
"lofoimg":String,
"sysname":String
},
3. 方法三:约束数据类型及默认值 如果父组件没有传递数据 走默认值 传递数据 走传递的值
props:{
"logoimage":{
type:String,
default:"http://img4.imgtn.bdimg.com/it/u=2055446315,3420384081&fm=26&gp=0.jpg"
},
"sysname":{
type:String,
default:"默认学生信息管理系统"
},
"parentinfo":Object,
}
demo
//子组件
<template>
<div id="logo">
//这个案例中 子组件的logoimage sysname由父组件传递而得
<img class="logoimg" :src="logoimage" alt=""> //动态绑定图片路径
<span class="logoname">{{sysname}}</span>
</div>
</template>
<script>
export default{
props:{
//default 为子组件默认的数据,
//存在默认数据,父组件若向子组件传递值,子组件走传递的值;若没有传递值,子组件走自己的默认值
"logoimage":{
type:String,
default:"http://img4.imgtn.bdimg.com/it/u=2055446315,3420384081&fm=26&gp=0.jpg"
},
"sysname":{
type:String,
default:"默认学生信息管理系统"
},
"parentinfo":Object,
}
}
</script>
//父组件
<template>
<div id="title">
<!-- v-logo中的 属性名称 应与子组件中的 props[] 中的属性名称保持一致-->
<v-logo :logoimage="logo" :sysname="name"></v-logo>
</div>
</template>
<script>
import logo from "./child/logo"; //引入子组件
export default{
name:"",
//注册子组件
components:{
"v-logo":logo
},
data(){
return {
//父组件传递的数据
name:"父组件传递的学生信息管理系统",
logo:"src/assets/logo.png"
}
}
</script>
- 非父子组件传值 : $emit $on
<!--为实现非父子组件的值传达 需要new一个对象-->
Vue.prototype.EmitEvent = new Vue();
1.组件1传递数据
this.EmitEvent.$emit("go-event",{
"name":"张三",
"age":20
})
2.组件2接收数据
this.EmitEvent.$on("go-event",function(result){
console.log(result); //接收到的数据
})
三、子父组件的相互获取
- 子组件内获取整个父组件
// 方法一:通过父组件给子组件属性值实现
1.子组件中props中定义:
props:{"parentinfo":Object}
2.父组件中使用子组件时属性parentinfo赋值为this, this指当前父组件
<v-logo :parentinfo="this">
3.在子组件中输出
console.log(this.parentinfo); //获得整个父组件
//方法二:在子组件中使用this.$parent获取
let parentData=this.$parent; //获取到当前子组件的父组件、
- 父组件中获取子组件
1.在父组件中子组件的标签上添加ref属性
<v-logo ref="logolist"></v-logo> //logolist自定义名称
2.获取:this.$refs
let logoinfo=this.$refs.logolist; //获取到的是整个logo子组件