Here’s an example of a parent component that needs to be +1 via the child component’s button. Because the props option is passed in as a copy of the props option, you can’t change the parent component’s value by changing the props value.

// The global vue component
Vue.component("my-comp", {
  template: ` < div > < hr / > < span > within {{innernum}} < / span > < button @ click = "$emit (' update: innernum 'innernum + 1)" > + 1 < / button > < / div > `.props: ["innernum"]});new Vue({
  template: ` < div id = "app" > < span > external {{outnum}} < / span > < my - comp: innernum sync = "outnum" / > <! -- <my-comp :innernum="outnum" @update:innernum="outnum = $event"></my-comp> --> </div> `.el: "#app".data: { outnum: 0 }
}).$mount("#app");


Copy the code

=====>>>>>>>>codesandbox.io/s/gallant-w…
The modified value is put into the global variable $event, which is triggered in the parent component and then retrieved. Similar to EventBus, bidirectional binding also uses this method, except that bidirectional binding synchronizes the data instead of modifying it

Pay attention to

Update: props for the child component if you want to use sync