尚硅谷后台管理系统学习

尚硅谷后台管理系统学习笔记（一）

组件通信方式–复习(001)

• 第一种：props

  • 适用场景：父子组件通信

  • 注意：

    • 父给子传递函数，本质是子给父传数据
    • 父给子传数据，本质是父给子传数据

  • 方式：

    • [’ '],{type:Array},{type:Array,default:[]}

  • 路由的props

    • 书写形式：布尔值、对象、函数形式

• 第二种：自定义事件

  • 适用场景：子给父传数据
  • $on、$emit

• 第三种：全局事件总线

  • 适用场景：万能
  • $bus
  • 组件的原型的原型指向vue.prototype
  • vue.prototytpe.$bus = this;

• 第四种：pubsub-js

  • 适用场景：万能
  • 发布与订阅（少用）

• 第五种：vuex

  • 适用场景：万能

• 第六种：插槽

  • 适用场景：父子通信（一般用于结构）
  • 默认、具名插槽、作用域插槽

组件通信–自定义事件深入(002)

• 事件的注意事项

  • 事件：
    • 系统事件：click、双击、鼠标系列等等
    • 自定义事件
  • 事件源、事件类型、事件回调

• 给组件添加事件，加修饰符.native，会变为原生DOM事件

  @click.native="handler1"
  

  • @click.native可以把自定义事件变为原生DOM事件，当前click事件是给子组件的根节点绑定了单机事件，利用到了事件的委派

• 给原生DOM绑定自定义事件是没有任何意义的，因为没办法触发$emit

• 组件内部触发自定义事件

  //父组件
  <Events @click="handler3"/>
  //子组件
  <button @click="$emit('click',参数)">分发自定义click事件</button>
  

组件通信–v-model深入(003)

• v-model可以实现数据的双向绑定

• 深入学习v-model

  • 原理：

    //原生Dom中是有oninput事件,经常结合表单元素一起使用，当表单元素文本内容发生变化的时候就会发出一次回调
    <input type="text" :value="msg" @input="msg=$event.target.value"/>
    

• 通过v-model实现父子组件数据同步

  //父组件
  //@input:并非原生input事件，而是自定义事件
  <CustomInput :value="msg" @input="msg=$event"/>
  <CustomInput v-model="msg"/>
  //子组件
  //@input:原生input事件
  <input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
  export default{
  	name:'CustomInput',
      props:['value']
  }
  

属性修饰符sync（004）

• sync修饰符：组件通信方式一种，实现父子组件数据同步

  • :money.sync:第一，父组件给字符串传递props:money
  • 第二：给当前子组件绑定一个自定义事件，而且事件名称为update:money

  //父组件
  <Child :money.sync="money"/>
  //子组件
  <button @click="$emit('update:money',money-100)">花钱</button>
  

组件通信–$attrs||$listeners（005）

• $attrs属于组件自身的一个属性，可以获取到父组件传递过来的props数据

• 如果父组件给子组件传的数据已经被props接收，那么$attrs属性中是获取不到的

• //简单的方法,在子组件中直接v-bind="$attrs"
  <a :title="title">
      //该写法不支持语法糖
      <el-button v-bind="$attrs" v-on="$linsteners"></el-button>
  </a>
  

• $listeners属于组件自身的一个属性，可以获取到父组件传递过来的自定义事件

$attrs||$listeners都是组件实例的属性，可以获取到父组件

组件通信–$parent||$children(006)

• $children组件实例的属性，可以获取到当前组件的所有子组件，是个数组

• $parent组件实例的属性，可以获取到当前组件的父组件

• //ref：获取节点（组件标签）,可以获取到真实的DOM节点，也可以获取到子组件的标签（操作子组件的数据与方法）
  <Son ref="xm">
  <Daughter ref="xh">
      this.$refs.xm.money-=100
  	this.$refs.xh.money-=150
  //组件实例自身拥有一个属性$children，可以获取到当前组件中所有子组件
  this.$children.forEach(item=>{
      item.money -= 200
  })
  //可以通过$parent属性获取到组件的父组件，可以操作父组件的数据与方法
  this.$parent.money += 50
  

组件通信–混入mixin（007）

• 如果项目当中有很多结构类似功能，想到组件复用–>js业务逻辑相似，想到混入mixin

• 混入mixin可以把多个组件js重复、相似的部分，放置到一个地方对外暴露一个对象

• import myMixin from '@/page/.../.../myMixin'
  export default{
      name:'Son',
      mixins:[myMixin],
      data(){
          
      }
  }
  

组件通信——作用域插槽（008）

• 插槽：实现父子组件通信（通信的是结构）
• 插槽分类：默认插槽、具名插槽、作用域插槽
  • 作用域插槽：子组件数据来源于父组件，子组件决定不了自身结构与外观

后台管理系统项目简介（009）

• 什么是后台管理系统项目
  • 前端领域中，开发的后台管理系统项目，非java、php后台语言项目
  • 尚品汇电商平台项目，这个项目主要针对的是用户，可以让用户在平台当中购买产品
  • 用户购买的产品信息从何而来？
  • 前台项目当中的数据来源于卖家–>卖家如何管理数据？
  • 开发可视化的工具，实现卖家对数据的增删改查
  • 身份不同，可见可操作内容不同
  • 对于后台管理系统而言，一般不需要注册

后台管理系统模板介绍（010）

• 模板地址：

  https://github.com/PanJiaChen/vue-admin-template