Vue で親コンポーネントから子コンポーネントにデータを渡す方法-Vue.js-php.cn

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

WBOY

リリース： 2022-08-10 14:09:25

転載

2172 人が閲覧しました

この記事では、vue に関する関連知識を提供します。主に、props とイベント、ref 属性、コンテンツの提供と挿入など、Vue の親コンポーネントと子コンポーネント間でデータを渡すいくつかの方法をまとめています。、一定の参考値があるので一緒に見ていきましょう、皆さんの参考になれば幸いです。

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

[関連する推奨事項: javascript ビデオチュートリアル、vue.js チュートリアル ]

vue を学習しています最近ソースコードには、Vue の親コンポーネントと子コンポーネント間でデータを転送するいくつかの方法がまとめられています。

1.props & event

親コンポーネントは props データを子コンポーネントに渡し、子コンポーネントはイベントをトリガーすることでデータを親コンポーネントに返します。コードは次のとおりです。

//子组件 
<template>
    <div @click="changeName(&#39;YYY&#39;)">{{name}}</div>
</template>
<script>
export default{
    props:[&#39;name&#39;],//or props:{name:{type:String,default:&#39;&#39;}}
    methods:{
        //不能在子组件修改props数据，应触发事件让父组件处理
        changeName(newName){
            this.$emit(&#39;changeName&#39;,newName)
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from &#39;path&#39;
    export default{
        data(){
            return {name:&#39;XXX&#39;}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</scritp>

ログイン後にコピー

上記は完全なプロセスです。親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはイベントをトリガーします。イベントは親コンポーネントによって監視され、それに応じて処理されます。

2.ref

ref 属性は、子コンポーネントまたはネイティブ DOM で定義できます。子コンポーネントにある場合は、子コンポーネントのインスタンスを指します。ネイティブ DOM 上にある場合、ネイティブ DOM 要素を指します (要素の選択に使用でき、querySelector の問題を排除できます)。

データを渡す考え方: 親コンポーネントの ref を通じてサブコンポーネントのインスタンスを取得し、サブコンポーネントのメソッドを呼び出して、関連するデータをパラメーターとして渡します。コードは次のとおりです:

//子组件 
<template>
    <div>{{parentMsg}}</div>
</template>
<script>
export default{
    data(){
        return {
            parentMsg:&#39;&#39;
        }
    },
    methods:{
        getMsg(msg){
            this.parentMsg = msg;
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">SEND MESSAGE</button>
    </div>
</template>
<script>
    import childComp from &#39;path&#39;
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg(&#39;Parent Message&#39;);
            }
        }
    }
</scritp>

ログイン後にコピー

3.provide & inject は、運用環境での使用が公式には推奨されていません

provide は、提供することを意味します。コンポーネントが Provide を通じてデータを提供するとき、コンポーネントは、祖先コンポーネントによって渡されたデータを使用できるように、inject を使用して注入を受け入れることができます。コードは次のとおりです。

//child
<template>
    <div>{{appName}}</div>
</template>
<script>
export default{
    inject:[&#39;appName&#39;]
}
</script>
 
// root 
export default{
    data(){
        return {
            appName:&#39;Test&#39;
        }
    },
    provide:[&#39;appName&#39;]
}

ログイン後にコピー

[関連する推奨事項: javascript ビデオチュートリアル、vue.js チュートリアル ]

以上がVue で親コンポーネントから子コンポーネントにデータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。