前端面试总结（二）

1.如何实现vue组件通信

vue组件通信的三种情况

　　父子通信

　　兄嘚通信

　　爷孙通信

父子通信：

　　方法一： props/$emit

　　父组件使用prop向子组件传递数据，子组件通过事件香父组件发送消息（v-on绑定事件）

　　接下来我们通过一个例子，说明父组件如何向子组件传递值，在子组件list.vue中如何获取父组件的数据list:['Visiliki','X','Emily']

　　父组件：

<template>
  <div id="app">
    <users v-bind:list="list"></users>
    <!--前者自定义名称便于子组件调用，后者要传递数据名 -->
  </div>
</template>
<script>
import List from './components/List'
export default {
  name: 'App',
  data() {
    return
    {
      list: ['Visiliki', 'X', 'Emily']
    }
  },
  components: {
    list: List
  }
}

　　子组件：

<template>
  <div class="hello">
    <ul>
      <li v-for="user in list">{{user}}</li>
      <!-- 遍历传递过来的值，然后呈现到页面 -->
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    list: {
      //这个就是父组件中子标签自定义名字
      type: Array,
      required: true
    }
  }
}
</script>

　　子组件向父组件传值(通过事件形式)

　　接下来我们通过一个例子，说明子组件如何向父组件传递值：

　　当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子组件向父组件传值”。

　　实现子组件向父组件值的传递

　　子组件：

<template>
    <header>
        <h1 @click="changeTitle">{{title}}</h1>
        <!-- 绑定一个事件 -->
    </header>        
</template>
<script>
　　export default {
    　　name: 'app-Header',
    　　data() {
        　　return {
            　　title:"Vue.js Demo"
        　　}
    　　},
    　　methods: {
        　　changeTitle () {     //自定义事件，传递值
            　　this.$emit("titleChanged","子向父组件传值") 
        　　}
    　　}
　　}
</script> 

　　父组件：

<template>
    <div id="home">
        <app-header v-on:titleChanged="updateTitle"></app-header>  
          <!--与子组件titleChanged自定义事件保持一致    updateTilte（$event）接受传递过来的文字-->
        <h2>{{title}}</h2>
    </div>        
</template>
<script>
　　import Header from './components/header'
　　export default {
    　　name: 'home',
    　　data() {
        　　return {
            　　title:"传递的是一个值"
        　　}
    　　},
    　　methods: {
        　　updateTitle (e) {     //声明这个函数
            　　this.title = e
        　　}
    　　},
    　　component: {
        　　'app-Header': Header
    　　}
　　}
</script>

　　方法二： $emit/$oon

　　这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件。

　　巧妙而轻量的实现了任何组件间的通信，包括父子，兄嘚，跨级。

　　当我们的项目比较大时，可以选择更好的状态管理解决方案Vuex

　　具体实现方式：

var Event = new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {})

 　　举个例子：

　　假设兄嘚组件有三个，分别是ABC组件，C组件如何获取A或者B组件的数据

<div id="itany">
        <my-a></my-a>
        <my-b></my-b>
        <my-c></my-c>
    </div>
    <template id="a">
        <div>
            <h3>A组件： {{name}}</h3>
            <button @click="send">将数据发送给C组件</button>    
        </div>
    </template>
    <template id="b">
        <div>
            <h3>B组件： {{age}}</h3>
            <button @click="send">将数据发送给C组件</button>    
        </div>
    </template>
    <template id="c">
        <div>
            <h3>C组件： {{name}},{{age}}</h3> 
        </div>
    </template>
    <script>
        var Event = new Vue();   //定义一个空的Vue实例
        var A = {
            template:'#a',
            data() {
                return {
                    name: 'Xcymo'
                }
            },
            methods: {
                send () {
                    Event.$emit('data-a',this.name)
                }
            },
        }
        var B = {
            template: "#b",
            data() {
                return {
                    age: 20
                }
            },
            methods: {
                send () {
                    Event.$emit('data-b',this.age)
                }
            },
        }
        var C = {
            template: "#c",
            data() {
                return {
                    name: '',
                    age: ''
                }
            },
            mounted() {
                Event.$on('data-a',name => {
                    this.name = name; //箭头函数内部不会产生新的this，这边如果不用=>,this指代的Event
                })
                Event.$on('data-b',age => {
                    this.age = age
                })
            }
        }
        var vm = new Vue({
            el: '#itany',
            components:{
                'my-a': A,
                'my-b': B,
                'my-c': C
            }
        })
    </script>

 

　　$ON监听了自定义事件data-a和data-b,因为有时会不确定何时会触发事件，一般在mounted或者created钩子中监听。

　　方法三 Vuex

　　简要介绍vuex原理

　　Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行。

　　Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作（常见于调用接口异步获取更新数据）或者批量的同步操作需要走Action，但是Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。