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>
前端路漫漫，且行且珍惜❤️
