2021-07-29

自己封装组件

1.建一个test.Vue文件内容如下

<template>
  <div>
    <el-button v-for="(btn,index) in this.buttons" :key="btn.id" :type="btn.type ? btn.type:'primary'"
               :icon="btn.icon" :size="btn.size?btn.size:'mini'">{{btn.label}}
    </el-button>
  </div>
</template>
<script>
export default {
  name: "buttonTemplate",
  props: {
    buttons: {
      type: Array,     //type是类型的意思;类型有String Number Boolean Function Object Array Symbol
      required: true   //可以使用required选项来声明这个参数是否必须传入。
    }
  }
}

谁用谁引入
父组件

import myButton from "../components/btn/btn.vue"

<div class="home">
  <my-button :buttons = "buttons"></my-button>
</div>
data(){
  return {
    buttons:[
      {
        label:"创建",
        icon:"el-icon-circle-plus",
        size:"mini",
        type:"primary"
      },
      {
        label:"修改",
        icon:"el-icon-remove",
        id:1,
        size:"medium",
        type: "success"
      },
      {
        label:"导入",
        icon:"el-icon-success",
        id:2,
        size:"small",
        type:"warning",
      }
    ]
  }
},
components:{
  myButton
}

Vue X

只能在mutaions里修改state，actions不能直接修改state
Commit方法执行mutation ; dispatch方法来执行actions
Eg:
在Vuex中写的内容

```javascript

```javascript

```javascript

```javascript

```javascript

```javascript

```javascript

```javascript

```javascript

```javascript
state: {
    val:{
      name:"郑",
      age:18,
      sex:"男"
    },
    count:0,
    goods:[]
},
getters:{
  totalNum:function (state) {
    let a = 0;
    state.goods.forEach(item=>{
      a = a + item.num
    })
    return a
  }
},
mutations: {
  increment (state){
    state.count++
  },
  newName(state,msg){
    state.val.sex = msg
  },
  init(state,goods){
      state.goods = goods
  }
},
actions: {
  getCart(plyload){
    request.get('/mi/cart.php')
        .then(res=>{
//init是执行的mutations里面的方法所以yongcommit
Res.data是传入到init中的值
          plyload.commit("init",res.data)
        })
        .catch(err=>{
          console.log(err)
        })
  }
},

在需要用到数据的.vue文件中写

sum(){
  console.log(this.$store.state.val.sex)
//newName是mutations里面的方法需要用commit去执行后面的是向newName里面传入的参数
  this.$store.commit('newName',this.price.zz)
//dispatch是操作的异步数据的方法
  this.$store.dispatch("getCart")
  console.log(this.$store.state.val.sex)

},
sums(){
  console.log(this.$store.state.goods)
}

VueX中的modules

第一步先建立一个.js结尾的文件
内容是export default{
Namespaced:true(这样就能在全局访问到这个模块中的各个状态方法)

state:{
name:”证书彬”
}

mutations:{getUser(context){
    console.log("我是模块中的方法")
    console.log(context,"我是模块中同步的context")
}
actions:{
    getData(context){
        console.log("我是模块中的方法")
        console.log(context,"我是模块中异步的context")
    }
},

modules:{}
}

第二步在store中的.js中导入刚建的那个.js文件

第三步在store中的.js中的modules中写上刚才导入的.js的文件名
想要在用Vuex的.vue文件中取到模块中的state中的数据方法 this.$store.$state.user.name
取出模块中的方法 this.$store.commit(“user/getuser”)
第一个user是这个模块的名称(也就是在index.js中module中填写的名称) getuser是方法名
同步中的context只携带了此模块的state中的数据 //操作根vuex的
异步中的context携带了commit dispatch getters rootGetters rootState 此模块的state中的数据

父向子传值

子组件com.vue
以下内容在父组件中写的
第一步导入子组件

import son from '../components/com.vue'

注册组件

components:{son}

在template中使用组件

//第一个fontSize是子组件需要在props里面写的名字
//第二个fonSize是父组件里面需要传递给子组件的值
<son@childByValue="getChildValue" :fontSize="fontSize"></son>

以下内容在子组件中写的
这里的fontSize名称必须和父组件中v-bind后绑定的名字一致
//type是类型的意思;类型有String Number Boolean Function Object Array Symbol
//可以使用required选项来声明这个参数是否必须传入。
props:{fontSize:{type:String,required: true
}}
子向父传值
下面内容在子组件中写
设置一个点击事件用来出发KaTeX parse error: Expected '}', got 'EOF' at end of input: …传递过去的数据 this.emit(‘childByValue’, this.names)
}

下面内容在父组件中写

<son@childByValue="getChildValue" :fontSize="fontSize"></son>
getChildValue(childValue) {
// childValue就是子组件传过来的值
      this.childName = childValue
    }

组件与组件之间的传值-事件总线
先建立一个bus.js文件
a组件把内容发送到b组件
在两个组件都需要导入bus.js文件
a组件内容

handleClick () {
  bus.$emit('pao', this.elValue)
  this.$router.push("/bro2")
}

B组件内容

created(){
  console.log("____________________--")
  bus.$on('pao', (val) => {
    console.log(val)
    this.text = val
  })
},

element中面包屑的使用
进行判断目前的路径(path)是否在首页,在首页不显示面包屑

<el-breadcrumb v-if="this.$router.currentRoute.path!=='/admin/shop'">

设置首页的路径

  <el-breadcrumb-item :to="{ path: '/admin/shop' }">首页</el-breadcrumb-item>

获取当前所在所在页面中路由中的name的值

<el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
</el-breadcrumb>

给elementui添加回车事件

需要在输入框中添加回车事件@keyup.enter.native="触发的函数"

//路由守卫
//写在main.js中
router.beforeEach((to,from,next) => {
    if(localStorage.getItem("userid")){
      next(true);
    }
  else{
    console.log("我是否则")
    if (to.path === '/'){
      next();
      console.log("我是首页")
    }else {
      next('/?redirect='+to.path)
      console.log("我是redirect")
    }
  }
})