vue面试题准备

vue-router：

1.vue路由---跳转/传参：

a.跳转（导航）：

声明式：<router-link :to="...">

编程式：router.push(...)　　router.replace(...)　　router.to(...)

b.传参：

name + params 组合：

path + query 组合：

参考链接：

1.vue路由跳转四种方式（带参数）

2.vue路由传参的几种方式

3.vue router 的 params和query传参的使用和区别

2.vue配置全局参数

方式1：建立独立js文件。export 暴露出变量或者函数名字。组件import引用

方式2：在main.js处引用，全局this.xxx使用

问题:容易全局命名污染

方式3：vuex 统一管理（重点）

参考资料：vuex---store状态管理

（全局的变量，data用vuex多一些吧，方式1js一般封装函数或const常量多一些，个人感觉）

3.vue组件事件传递

组件是vuejs最核心的功能,主要是为了复用和相互传值。分为父传子，子传父、父子双向绑定、非父子关系值传递。

路由传值（参考前面）

通过设置Session Storage缓存的形式进行传递：参考链接

父传子（props接收）

// 父组件
<template>
    <div>
         <s-child v-bind:infos="informations"></s-child>   // infos对应子组件
    </div>
</template>    

<script>
import Child from "子组件地址";

export default {
    name: "mz",
    data() {
        return {
            informations: [
               { name: "A1", age: 16 },
               { name: "A2", age: 17 },
               { name: "A3", age: 18 },
               { name: "A4", age: 19 },
            ]    
          }
        } ,
       componts: {
        "s-child" : Child        // 注册组件
        }
}

// 子组件
<template>
  <div>
    <h3>属性传值- 调用父组件数据</h3>
    <ul>
      <li v-for="info in infos" :key="info">   // 循环遍历infos 
        <span>{{info.name}}</span>
        <span>{{info.age}}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "s-child",
  props: ["infos"],    // 接收父组件传递的参数 infos （在父组件被绑定）
  data() {
    return {};
  }
};
</script>

父组件传递值给子组件,在子组件的自定义标签v-bind绑定自定义属性值,在子组件用props接收 （注意点,props需要使用驼峰命名法才行）

子传父（emit事件）

// 父组件
<template>
    <div>
        <s-child v-on:infos = "cy"></s-child>    // 绑定子组件infos
        <div>{{msg}}</div>
    </div>
</template>

<script>
import Child from '子组件地址'

export default {
    name: '父组件名',
    data () {
        msg: ''    // 先赋空值
    },
    components: {
        "s-child": Child    // 组件局部注册
    },
    methods: {
        cy(somedata) {
            this.msg = somedata    // 方法赋值
        }
    }
}

</script>

// 子组件
<template>
  <div>
    <h3>触发事件传参给父组件</h3>
    <button v-on:click = "onClick">向父组件传参</button>
  </div>
</template>
 
<script>
export default {
    name: "s-child",
    data() {
        return { childmsg: '我是子组件的值' }
    },
    methods: {
        onClick: function () {
            this.$emit('infos', this.childmsg)    // infos是父组件上v-on后绑定的，this.childmsg作为参数somedata
        }
    }
}
</script>

子传父需要通过自定义监听事件v-on和$emit触发事件配合来实现,比如上面的例子:
(1)、在父组件的中自定义监听事件@add="handler"(当自定义监听事件add被触发之后，handler方法就会执行)。
(2)、在子组件中this.$emit('add',this.sum);（触发add事件,并返回子组件的数据）
(3)、handler方法里面将子组件返回的值赋值给父组件的变量
从而完成了子传父

父子相传（v-model双向绑定）

非父子组件之间传值（eventBus）

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值。

参考链接

vuex状态管理（大项目）

vue-router：

1.vue路由---跳转/传参：

2.vue配置全局参数

3.vue组件事件传递

4.vue dom异步更新

猜你喜欢