子 => 親コンポーネントのパラメータを渡す

子コンポーネントは親コンポーネントのメソッドを呼び出します。

参照される子コンポーネントのイベントを親コンポーネントに登録します（このイベントの名前はカスタムです）
サブコンポーネントはこのイベントをトリガーできます $emit('イベント名')

子コンポーネントから親コンポーネントにデータを渡す

$emit メソッドの 2 番目のパラメーターは、子コンポーネントから親コンポーネントに渡されるコンテンツを定義できます。
親コンポーネントでこのコンテンツを取得する方法
2.1 親コンポーネントのメソッドにはカスタムパラメーターがありません。このパラメーターを親コンポーネントのメソッドに直接追加することで取得できます。 2.2 親コンポーネントには
カスタムパラメーターがあるため $イベントは、サブコンポーネントによって渡されたデータを取得することもできます。イベントを介して$ 渡すことができるのは最初のパラメータのみです

<body>
    <div id='app'>
        <father></father>
    </div>

    <template id="father">
        <div>
            <input type="text" name="" id="" v-model="son_val">
            <!-- 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） -->
            <son @son_num="son_num_1"></son>
        </div>
    </template>

    <template id="son">
        <div>
            <input type="text" v-model="num_val">
        </div>
    </template>

    <script>
        //father
        Vue.component('father', {
      
      
            template: '#father',
            data() {
      
      
                return {
      
      
                    son_val: ''
                }
            },
            methods: {
      
      
                //获取子传来的参数
                son_num_1(data) {
      
      
                    this.son_val = data
                }
            }
        })
      	//son
        Vue.component('son', {
      
      
            template: '#son',
            data() {
      
      
                return {
      
      
                    num_val: ''
                }
            },
            methods: {
      
      
            },
            updated(){
      
      
                // 子组件可以触发这个事件$emit('事件名字')
                this.$emit('son_num',this.num_val)
            }
        })

        const vm = new Vue({
      
      
            el: '#app',
            data: {
      
      },
            methods: {
      
      }
        })
    </script>
</body>

子 => 親コンポーネントのパラメータを渡す

子 => 親コンポーネントのパラメータを渡す

子コンポーネントは親コンポーネントのメソッドを呼び出します。

子コンポーネントから親コンポーネントにデータを渡す

Supongo que te gusta