Vueカスタムコンポーネントv-model双方向バインドを実現

コアポイント:1.親コンポーネントは何もしなくてもv-modelの値をバインドする必要があります.サブアセンブリ受信バインディングのprops属性は、valueである必要がある.サブアセンブリdataのうち は、valueの値4を受信しなければならない.サブアセンブリwatchの傍受valueの値は、 に同期.サブアセンブリwatchが傍受する の値は、$emit('input')によって親アセンブリに同期される
親コンポーネント

<template>
	<div>
		<p>       ：{{num}}p>
	    <button @click="btnClick">  button> 
	    <child v-modal="num" />
	div>
template>

<script>
import Child from './child.vue';
export default {
	name: 'parent',
	components: {
		Child 
	},
    data() {
        return { num: 0 };
    },
    methods: {
        btnClick() {
            this.num--;
        },
    },
};
script>

サブアセンブリ

<template>
	<div>
		<p>       ：{{num}}p>
    	<button @click="btnClick">  button> 
    div>
template>

<script>
export default {
	name: 'child',
    props: {
        value: Number,
    },
    data() {
        return { num: 0 };
    },
    watch: {
        value(val) {
            this.num = val;
        },
        num(num) {
            this.$emit('input', num);
        },
    },
    methods: {
        btnClick() {
            this.num++;
        },
    },
};
script>