vue--组件的创建与传值

最新推荐文章于 2024-08-14 17:18:10 发布

原创最新推荐文章于 2024-08-14 17:18:10 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue中组件的创建方法，包括局部组件和全局组件的定义与使用，以及组件间的数据传递和事件通信机制。同时，还探讨了子父组件如何相互获取对方的数据。

一、组件的创建

局部组件

 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子组件