Vueのコールバック関数についてお話しします

コールバック関数?それはUIフレームワークで使われているのではないでしょうか.
何て言ったっけ、本を使うまで恨みが少なかった.普段はVueを引っ張って、propsパッケージコンポーネントを使っているような気がします.自分でコールバックを作ることもめったにありませんが...
しかし,実際に開発されたパッケージコンポーネントはそうではない.多くのコンポーネントでは、子の親コンポーネントが通信する必要があります.
栗を挙げてみましょう.
プロダクトマネージャには、クーポンリストを作成する必要があります.そしてクーポンリストをコンポーネントにカプセル化する必要があります.注文支払い時にクーポンリストを呼び出します.次にどちらかを選択し、親コンポーネントで選択したクーポンを取得します.
クーポンリストのUIは大体このようになっています(美団の例).
この需要は難しくないように見えますが、実際に作られています.の次のような問題が発生します.
親コンポーネントはどのようにクーポンリストコンポーネントを取得しますか?どのクーポンが選択されていますか?
この時多くの初学Vue.jsの童靴は乱れているかもしれません.....データインタラクションをどのように行うか分かりません
Vuexを理解していない場合は、次のことを理解することができます.
コールバック関数!
コールバック関数は多くの学生によく知られていない.ajaxは良い例です
コールバック関数はいったい何ですか.
コールバック関数はパラメータであり、この関数をパラメータとして別の関数に転送し、その関数が実行された後、転送されたこの関数を実行します.この過程をコールバックと呼ぶ
emmm.....雲の中に霧が立ち込めている.一般的には、メソッド体をパラメータとして別のメソッド体に渡し、別のメソッド体の内部で伝達を実行するメソッド体である.入力パラメータをサポート
あまり話さないで、demo==を書きます.
まず、サブコンポーネントを定義し、処理をカプセル化します.

  <span class="hljs-built_in">export</span> default {
    name: <span class="hljs-string">"ChildComponents"</span>,
    props: {
      clickCallBack: {  //        
        <span class="hljs-built_in">type</span>: Function, //    ：  
        required: <span class="hljs-literal">true</span> //    ： 
      }
    },
    methods: {
      <span class="hljs-function"><span class="hljs-title">childClick</span></span>()  {
        this.<span class="hljs-variable">$props</span>.clickCallBack(<span class="hljs-string">'          ~~'</span>); //  Props      ，       ~~
      }
    }
  }

次に、親コンポーネント呼び出しサブコンポーネントを定義します.

  import child from <span class="hljs-string">'./ChildComponents'</span>
  <span class="hljs-built_in">export</span> default {
    name: <span class="hljs-string">"ParentComponents"</span>,
    components: {
      child
    },
    <span class="hljs-function"><span class="hljs-title">data</span></span>() {
      <span class="hljs-built_in">return</span> {
        say: <span class="hljs-string">''</span>
      }
    },
    methods: {
      ParentTest(val) { //       val        
        this.say= val; //  data    ~
        console.log(val,<span class="hljs-string">"in params"</span>); //        
        console.log(this.say,<span class="hljs-string">"in data"</span>); //          data   
      }
    }
  }

では、結果を見てみましょう.
ああ、これで親コンポーネントの通信の問題を解決できます.楽しく遊べるようになりました~~
もちろん、私は自分で解決策を実現しました.Vueでは$emitを使用してコールバックを推奨しています.....
学生たちも自分でjQuery版のコールバックを書いてみることができます.