コンポーネントにv-modelを使用する

コンポーネントにv-modelを使用する

に等しい

コンポーネントに使用すると、v-modelは次のようになります.

に等しい

正常に動作するために、このコンポーネント内のは、

value特性をvalueというprop上の

にバインドする

は、そのinputイベントがトリガされたときに、カスタムinputイベントを介して新しい値を

に投げ出す.

Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})

v-modelはこのコンポーネントで完璧に動作するはずです.

例
親コンポーネントApp.vue中

import Model from "./components/Model";

export default {
  name: "App",
  data: function() {
    return {
      searchText:''
    };
  },
  components: {
    Model
  }
};

サブアセンブリmodel.vue

export default {
  props: ["value"],

};

プロセス:1.テキスト2を入力.:value='search'は、サブアセンブリ3に伝達する.サブアセンブリpropsは4を受け取る.サブアセンブリ:value='value'.サブアセンブリバインドinputは、$emitを介して親アセンブリ6に伝達する.親コンポーネント@input='searchText = $event'受信