「重學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>

複製代碼

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