A, $emit

The child component can reference the parent component’s data via props, so when the child component wants to modify this data, it can use $emit to modify the parent component’s data on the child component.

$emit receives two arguments:

  • {string} eventName Triggers events on the current instance.
  • [...args]Additional parameters are passed to the listener callback.

The sample

Scenario: The father gives the son money and the son wants to spend it. The son can see the specific amount of money, but the son cannot spend the money directly. The son needs to trigger an event, the father listens to this event, and the father receives the parameters passed by the son through $event

  • Child components can be called$emitPassing the event name to fire an event:
{{money}} <button @click="$emit('update:money', </button> </div> </template> <script> export default {props: ["money"] } </script> <style> .child{ border:1px solid green; } </style> Copy the codeCopy the code
  • Used on a child component of the parent componentv-onListen for this custom event, pass$eventAccepts arguments passed by the child component
//parent. Vue <template> <div class="parent"> <div> Dad now has {{total}} yuan <hr/> <Child :money="total" V-on :update:money="total = $event"/> // :money="total"  </div> </div> </template> <script> import Child from "./child.vue" export default { components: { Child }, data() { return { total: 10000 } } } </script> <style> .parent{ border:1px solid red; } </style> Copy the codeCopy the code

Second, the sync

.sync simplifies the above code and is used directly on the parent component

//parent. Vue <template> <div class="parent"> <div> Dad now has {{total}} yuan <hr/> <Child :money. Sync ="total"/> </div> </div> </template> copies the codeCopy the code

:money. Sync =”total” equivalent to :money=”total” V-on :update:money=”total = $event”

Three cases,

<div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp> <! -- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> --> </div> <script> Vue.component('my-comp', {template: '<div @click="increment"> </div>, data: function() {return {copyFoo: this.foo}}, props: ['foo'], methods: { increment: function() { this.$emit('update:foo', ++this.copyFoo); }}}); new Vue({ el: '#app', data: {bar: 0} }); </script>Copy the code

Note: the code will be expanded to
bar = val”>
, which is a syntax sugar.

Four,

  • Components cannot be modifiedpropsExternal data of
  • $emitCan trigger events and pass parameters
  • $eventYou can get$emitThe parameters of the

Since 2.3.0 we have reintroduced the.sync modifier, but this time it only exists as a compile-time syntactic sugar. It is extended to a V-ON listener that automatically updates the parent component’s properties. Example code is as follows:

支那

<comp :foo.sync="bar"></comp>
Copy the code

Will be extended to:

支那

<comp :foo="bar" @update:foo="val => bar = val"></comp>
Copy the code

When a child component needs to update the value of foo, it needs to explicitly fire an update event:

支那

this.$emit('update:foo', newValue)
Copy the code

At first glance, we use an example (popover closing event) to illustrate how this code works.

支那

<template> <div class="details"> <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px; border:1px solid #ddd; margin-bottom: 10px;" ></myComponent> <button @click="changeValue">toggle</button> </div> </template> <script> import Vue from 'vue' Vue.component('myComponent', { template: '<div v-if="show"> <p> Default initial value is {{show}}, </p> < button@click. stop="closeDiv"> </button> </div> ', props:['show'], methods: { closeDiv() { this.$emit('update:show', false); // Trigger the input event, Export default{data(){return{valueChild:true,}}, methods:{changeValue(){this.valuechild =! this.valueChild } } } </script>Copy the code

The effect is as follows:

The function of the sync modifier is that when a child component changes the value of a prop, the change is also synchronized to the parent component binding. If we don’t want to do.sync and we want to do that popover function, we can also pass the initial value, and then the event listener, which isn’t too complicated to implement. The sync implementation here is just to give you an idea of how it works, and there may be other complex features that can be used with Sync.

Link: www.jianshu.com/p/6b062af8c…

Author link: juejin.cn/post/699285…