「重学vue文档中秘密」

1. vm.$listeners  => 子组件触发父组件事件

vm.$listeners2.4.0 新增类型：{ [key: string]: Function | Array<Function> }只读详细：包含了父做用域中的 (不含 .native 修饰器的) v-on 事件监听器。它能够经过 v-on="$listeners" 传入内部组件——在建立更高层次的组件时很是有用。复制代码

• 相似于与react中组件传方法，不用使用$emit , $on 去注册监听事件， 很是实用

代码示例：

<!--  父组件 --!>
<template>
    <div class="parent">
        {{ name }}
        <child @changeName="changeName"/>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
    name: "parent"
    components: {
        child: () => import("./Child/Child.vue");
    }
})
export default class Parent extends Vue {
    public name: string = "路遥知马力";
    // 事件
    public changeName(): void {
        this.name = this.name + Math.random();
    }
}
</script>



<!-- 子组件 --!>
<template>
    <div class="child" @click="$listeners.changeName">
        点击我能够经过调用父组件的方法改变父组件的值
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Child extends Vue {
    
}
</script>复制代码

2.is 渲染不一样组件

is预期：string | Object (组件的选项对象)用于动态组件且基于 DOM 内模板的限制来工做。示例：<!-- 当 `currentView` 改变时，组件也跟着改变 -->
<component v-bind:is="currentView"></component>

<!-- 这样作是有必要的，由于 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能无效且被放置到外面 -->
<table>
  <tr is="my-row"></tr>
</table>更多的使用细节，请移步至下面的连接。See also：动态组件DOM 模板解析说明复制代码

在业务中，咱们若是展现不少不一样的组件，一般只能v-if 或者v-show 去拿值判断，若是使

用is 就能够在一个标签内去渲染，避免代码臃肿。

代码示例：

<!-- 父组件 --!>
<template>
    <div class="parent">
        <div :is="childComponent" class="childComponent" />
        <button @click="changeComponent">点击我改变组件</button>
    <div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import  ChildA from "./Child/ChildA.vue";
import  ChildB from "./Child/ChildB.vue";
@Component
export default class Parent extends Vue {
    public childComponent: Vue.Component = ChildA;
    public changeComponent(): void{
        this.childComponent = ChildB;
    }
}
</script>

<!--  子组件ChildA --!>
<template>
    <div class="childA">
        ChildA
    </div>
</template>
import {Component, Vue} from "vue-property-decorator";
export default class ChildA extends Vue {}

<!-- 子组件ChildB --!>
<template>
    <div class="childB">
        ChildB
    </div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
export default class ChildB extends Vue {};
</script>复制代码

3. .sync 修饰符实现双向绑定

.sync 修饰符2.3.0+ 新增在有些状况下，咱们可能须要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，由于子组件能够修改父组件，且在父组件和子组件都没有明显的改动来源。这也是为何咱们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，咱们能够用如下方法表达对其赋新值的意图：this.$emit('update:title', newTitle)而后父组件能够监听那个事件并根据须要更新一个本地的数据属性。例如：<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>为了方便起见，咱们为这种模式提供一个缩写，即 .sync 修饰符：<text-document v-bind:title.sync="doc.title"></text-document>注意带有 .sync 修饰符的 v-bind 不能和表达式一块儿使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，相似 v-model。当咱们用一个对象同时设置多个 prop 的时候，也能够将这个 .sync 修饰符和 v-bind 配合使用：<text-document v-bind.sync="doc"></text-document>这样会把 doc 对象中的每个属性 (如 title) 都做为一个独立的 prop 传进去，而后各自添加用于更新的 v-on 监听器。将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是没法正常工做的，由于在解析一个像这样的复杂表达式的时候，有不少边缘状况须要考虑。复制代码

注意，不能在复杂数据结构中使用

<!-- 父组件 --!>
<template>
    <div class="parent">
        <Child :age.sync="age"/>
        <button @click="changeAge">点击我改变age的值</button>
    </div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
    components: {
        Child: () => import("./Child/Child.vue");
    }
})
export default class Child extends Vue {
    public age: number = 5;
    public changeAge(): void {
        this.age = Math.random();
    }
}
</script>
<!-- 子组件 --!>
<template>
    <div class="child">
        {{ age }}
    </div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
    props: {
        age: {
            type: Number,
            default: 1
        }
    }
})
export default class Child extends Vue {}
</script>

复制代码

前端路漫漫，且行且珍惜❤️