首页 > 其他分享 >VUE组件使用

VUE组件使用

时间:2023-11-23 13:06:18浏览次数:34  
标签:VUE 使用 facePop showFaceDia components props 组件

vue组件使用分三步: 

1. 引用组件 import facePop from './components/facePop'
2. 注册组件 components = { facePop }
3. 使用组件 <facePop></facePop>

新建一个components文件夹存放组件

src/components/facePop.vue

<template>
    <div>
        <h2>我是一个facePop组件</h2>
    </div>
</template>

src/index.vue

<template>
  <div>
    <facePop></facePop>                   <!--3、在模板中使用kebab-case 两种都可以-->
    <face-pop></face-pop>                 <!--3、在模板中使用PascalCase-->
  </div>
</template>

<script>
  import facePop from './components/facePop';     //1、引入组件 import后的名字一般与组件名称相同,也可不一样
  export default{
    data(){},
    components:{
     facePop       //2、注册组件 一般直接取一个名字  即:facePop:facePop
    }
  }
</script>

组件名大小写

定义组件名的方式有两种:
(一) 使用 kebab-case
Vue.component('my-component-name', { /* ... / })
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。
(二)使用 PascalCase
Vue.component('MyComponentName', { / ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 
中使用时只有 kebab-case 是有效的。
我们使用字符串模板,所以这个限制就不存在了

组件之间传值

1、父组件给子组件传值

1)父组件调用子组件的时候绑定动态属性
2)子组件里通过props(props可以接收一个数组或对象,接收对象时可对数据进行校验如:{title:String},可以校验组件传过来的是否为String)接收父组件传过来的数据
总结:父组件传值给子组件(父组件绑定数据如:list="list",子组件通过props获取)
子组件的props选项能够接收来自父组件数据。没错,仅仅只能接收,props是单向绑定的,即只能父组件向子组件传递,不能反向。

传递方式分为两种

(1) 静态传递:
子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据了

<v-facePop showFaceDia=“这是文字”></v-facePop> // 此处showFaceDia不加冒号
子组件:
props:{
  showFaceDia: String
}

(2) 动态传递:

父组件:
data: 
{ 
    showFaceDia: false 
}
<v-facePop :showFaceDia=“showFaceDia”></v-facePop>

子组件:
props:{
  showFaceDia: Boolean
}

子组件向父组件传值 (vue写法)

子组件中:
this.showFaceDia = false  
this.$emit('showFaceDia',this.showFaceDia)  //执行showFaceDia函数并把要改变的值作为参数带过去

父组件:
methods:{
showFaceDia(msg){
    this.showFaceDia = msg
  }
}
不要忘记在DOM中引用:
<test :title="title" @showFaceDia="showFaceDia"></test>//注意showFaceDia后不能加括号

父组件调用子组件的方法:
ref用在子组件上,指向的是组件实例,可以理解为对子组件的索引,通过$ref可以获取到在子组件里定义的属性和方法

//父组件
<v-test :title="title" ref="aa"></v-test> //通过ref为子组件赋予ID引用
<div @click="getChild()"></div>
getChild(){
  this.$refs.aa.childFun()   // 此处使用
}

子组件调用父组件的方法

(1)直接在子组件中通过this.$parent.event来调用父组件的方法
(2)在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了实例:
子组件:
methods: {
        getParent () {
            this.$emit('togglePop')  //此处直接写父组件的事件名称
        }
    }
父组件:
DOM中:<test :title="title" @togglePop="togglePop"></test>
togglePop(){
            console.log('ddddddd')
        },

 



标签:VUE,使用,facePop,showFaceDia,components,props,组件
From: https://blog.51cto.com/u_16324253/8527066

相关文章

  • oracle 日期时间函数使用总结
    常用日期数据格式获取年的最后一位,两位,三位,四位--获取年的最后一位selectto_char(sysdate,'Y')fromdual;--获取年的最后两位selectto_char(sysdate,'YY')fromdual;--获取年的最后三位selectto_char(sysdate,'YYY')fromdual;--获取年的最后四位select......
  • web图片上传 【flask+vue2】
    直接上传代码demofromflaskimportFlask,request,jsonifyimportosfromflask_corsimportCORS#导入CORS模块#文件存储的目录UPLOAD_FOLDER='uploads'ALLOWED_EXTENSIONS={'png','jpg','jpeg','gif'}app=Flask(_......
  • vue element 表格定位到某行
    /***@description:通过表格索引定位表格的位置*@param{refName}table的ref值*@param{index}table的索引值*@return:*@author:hch*/$tableScrollMove(refName,index=0){if(!refName||!this.$refs[refName])r......
  • 界面组件DevExpress Reporting v23.1 - Web报表设计器功能升级
    DevExpressReporting是.NETFramework下功能完善的报表平台,它附带了易于使用的VisualStudio报表设计器和丰富的报表控件集,包括数据透视表、图表,因此您可以构建无与伦比、信息清晰的报表界面组件DevExpressReportingv23.1已经发布一段时间了,新版本增强了Web报表设计器的自定义......
  • 大数据分析使用哪些工具?
    大数据分析常用的工具包括但不限于以下几种:Hadoop:Hadoop是一个开源的分布式存储和计算框架,包括HDFS(Hadoop分布式文件系统)和MapReduce(分布式计算框架)。Hadoop可以处理大规模数据,并且提供容错性、高可用性和高性能。Spark:ApacheSpark是一个快速、通用的大数据处理引擎,它提供了基......
  • WPS中VLOOKUP函数的使用
    VLOOKUP函数的基本概念VLOOKUP函数是WPS表格中的一个内置函数,主要用于垂直查找数据。它的基本语法是:VLOOKUP(查找值,表格数组,列索引数,查找方式)。其中,查找值是我们需要在数据表中查找的值;表格数组是包含数据的区域;列索引数是我们希望返回的数据在表格数组中的列数;查找方式决定了......
  • 服务器虚拟化安装配置及使用
    Top[TOC]安装安装依赖包yuminstallqemu-kvmqemu-imgvirt-managerlibvirtlibvirt-pythonvirt-managerlibvirt-clientvirt-installvirt-viewer-y启动服务systemctlstartlibvirtdsystemctlenablelibvirtd#KVM的管理工具栈:qemu:qemu-kvm,qemu-img和libvirt#......
  • 如何使用markdown写毕业论文
    step1:pandoc:https://github.com/jgm/pandoc/releasesstep2:pandoc-crossref:https://github.com/lierdakil/pandoc-crossref/releasesstep3:pip3installgit+https://github.com/pandocker/pandoc-docx-pagebreak-py......
  • yum源使用
    问题:最小化安装Centos7,配置了阿里云官方yum源之后,一直无法使用yumError:Depsolvinglooplimitreached.Error:Package:rpm-python-4.11.3-45.el7.x86_64(@anaconda)Requires:librpm.so.3()(64bit)Removing:rpm-libs-4.11.3-45.el7.x86_64(@ana......
  • UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南"
    ​目录 uniapp进行打包使用上架工具appuplode进行发包1.登录appuploder软件     2.登陆开发者AppStore后台 uniapp进行打包在HBuilderX编辑器中打开需要打包的项目,然后点击上面菜单栏中发行=>原生App-云打包,对以下弹出的弹窗进行内容填写   ​......