子コンポーネントとの値のやりとりにv-modelを使う

Vue CLI / Nuxt.js の場合





子コンポーネントのmodelで親コンポーネントのv-modelに使用するプロパティとイベントを用意し、this.$emitで親要素に返す。
例のコードでは、changeValue関数をinputタグでv-bind:inputイベントで呼び出し、そのまま親要素に返すようにしている。

CDNの場合



    
        
        test
        
Vue.component('sample-component', {
    model: {
        prop: 'name',
        event: 'input-name',
    },
    methods: {
        changeValue() {
            this.$emit('input-name', this.name);
        },
    },
    template:`
    
    `,
})
JavascriptVue
スポンサーリンク
カトーの開発備忘録

コメント