这是我参加笔记活动的第8天

数组和对象必须用函数进行返回

链式注册不能加分号

dart sass node sass

正常的替换也会出问题，还要改配置。使用以下方法便可以解决 yarn安装的:

yarn add node-sass@yarn:dart-sass -D

npm安装的:

npm add node-sass@npm:dart-sass -D

: 加入冒号将组件属性动态渲染

props 组件向外传递参数

一个模板中只能有一个根元素，可以用div包裹

ctrl + j 显示控制台 Ctrl shift alt + j 打开volar面板

pug是简化标签用的

自定义的组件没有代码修正，所以名字一定不能打错

写成大写导致一辈子debug不出来

$emit（）

this.$emit("onEvent",this.message)
methods :{
sendclickHandle(of
//参数1:字符串:理论止是随便的,但是需要具有意义//参数2:传递的数据
this.$emit( "onEvent",this.message)
}

slot 插槽

希望组件封装的时候内容不被定死，我们可以使用slot插槽

<template>
	<button class="hm-button">
        <span><slot></slot></span> //通过span框选当中的内容 可以改变当中的样式
    </button>
</ template>

props向子组件传递参数

props可以校验，因为不进行校验，不能确保父组件传递来的是否是我需要的类型

<template>
  <button class="emui-button">
    <span><slot></slot></span>
  </button>
</template>

<script>
export default {
  //封装通用组件，会对props进行约束
  name: "emuiButton",
  props:{
    type:{
      //数据类型字符串
      type:String,
      def
    }
  }
};
</script>

<style lang="scss" scoped></style>

按需引入

组件库

Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

禁用状态

你可以使用 disabled 属性来定义按钮是否被禁用。

使用 disabled 属性来控制按钮是否为禁用状态。该属性接受一个 Boolean 类型的值。

切角按钮

<div class="notching">notching</div>

[css] view plaincopy

.notching {  
background:  
linear-gradient(135deg, transparent 10px, #ff1493 0) top left,  
linear-gradient(-135deg, transparent 10px, #ff1493 0) top right,  
linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right,  
linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;  
background-size: 50% 50%;  
background-repeat: no-repeat;  
}

dialog对话框

参数支持

参数名	参数描述	参数类型	默认值
title	对话框标题	string	提示
width	宽度	string	50%
top	与顶部的距离	string	15vh
visable	是否显示	boolean	false

自我提问

dialog 需要什么属性 button 如何封装

vue组件库开发日志（2）|青训营笔记