前端面试准备笔记系列之vue(03)

01. vue组件间的参数传递

父子组件传值

• 父-》子 通过props

子组件接收什么参数时有规则的，既可以是数组也可以是对象。

• 子-》父 $emit向外触发一个事件

注意：父组件可以随意向子组件传递参数，但是子组件不能反向修改父组件数据。单项数据流的概念。

props特性：props特性指的是当父组件使用子组件时通过属性向子组件传值时恰好子组件声明了对父组件传递过来的属性的一个接收；父子组件有个对应关系 父组件传递 --- 》子组件声明，特点是：属性的传递是不会在dom标签上进行显示的，当父父组件传递了属性子组件接收了属性在子组件里可以直接通过插值表达式取得属性里的内容

非props特性: 父组件向子组件传递了属性，但是子组件没有声明接收传递的内容，非props属性会显示在子组件最外层的dom标签的html属性里面

非父子组件传值

• 一种是发布定位模式

发布定位模式在vue中成为总线机制/Bus/发布订阅模式/观察者模式

通过创建一个vue实例赋值给prototype.bus,目的是将prototype上挂在一个名为bus的属性，这个属性指向vue的实例，只要之后调用的vue的实例或者创建的组件，每一个组件上都有bus这个属性。

• 另一种是通过vuex

02. vue子组件调用父组件方法，父组件调用子组件方法

父组件调用子组件方法：

• 方法一：通过ref直接调用子组件的方法

//父组件中
<Child ref="child"/>
methods: {
    handleClick() {
        this.$refs.child.sing();
    }
}

//子组件中
methods: {
    sing() {
      console.log('我是子组件的方法');
    }
  }

• 方法二：通过父组件事件$emit触发一个事件、子组件使用$on方法监听事件；

// 父组件
<Child ref="child"/>
methods: {
    handleClick() {
        this.$refs.child.$emit("childmethod")    //触发一个事件，子组件$on中的名字
    }
}

// 子组件
mounted() {
    this.$nextTick(function() {
        this.$on('childmethods', function() {  // 监听一个事件
            console.log('我是子组件方法');
        });
    });
}

子组件调用父组件的方法：

• 方法一：$emit向外触发一个事件，父组件监听这个事件。

//父组件
<child @fatherMethod="fatherMethod"></child>

//子组件
this.$emit('fatherMethod');

• 方法二：父组件把方法直接传入到子组件中，在子组件中直接调用这个方法。

//父组件
<child :fatherMethod="fatherMethod"></child>

//子组件
props: {
    fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }

• 方法三：子组件通过this.$parent.event来调用父组件方法

// 父组件
methods: {
    fatherMethod() {
        console.log('测试');
    }
}

// 子组件
childMethod() {
    this.$parent.fatherMethod();
}

03. 兄弟组件之间如何通讯？自定义事件

• 通过$emit 向外触发一个事件
• 在通过$on 监听这个事件
• event都是vue的实例，vue本身具有自定义事件能力。
• 使用$on需要在beforeDestroy中及时使用$off进行解绑，否则容易造成内存泄漏

// 兄弟组件
<Input @add="addHandler"/>
<List :list="list" @delete="deleteHandler"/>

//Input.vue  向外触发一个onAddTitle事件
event.$emit('onAddTitle',this.title)

// List.vue, 通过监听Input.vue中onAddTitle来实现
event.$on('onAddTitle',this.addTitleHandler)

//event
import Vue from 'vue'
export default new Vue()