vue组件相关

单文件组件

template

<template>  <div class="toast">      <!--start 淡入淡出 -->          <transition>            <div class="toast-com">{{data}}</div>          </transition>      <!--end 淡入淡出 -->   </div></template>

script

export default {       props : ['data']   }

css

 /*start 淡入淡出*/    .toast-com {        display : flex;        width : 100px;        height : 100px;        color : #fff;        justify-content: center;        align-items: center;        position : absolute;        top : calc(50% - 50px);        left : calc(50% - 50px);        background-color: rgba(0, 0, 0, 0.4);        border-radius: 4px;    }     /*start 淡入淡出*/

导入方式为
import Toast from ‘./Toast.vue’ //文件夹内内需添加js文件导出模块的方式
其中prop为组件间动态数据交互，vue内缩写 ：message=“”的形式。全写为 v-bind:message=”“

prop的方式是单向绑定，只能从父组件传递到子组件

如果想要修改prop

//定义一个局部变量，并用 prop 的值初始化它props: ['initialCounter'],data: function () {  return { counter: this.initialCounter }}//定义一个计算属性，处理 prop 的值并返回。props: ['size'],computed: {  normalizedSize: function () {    return this.size.trim().toLowerCase()  }}