Vueで値を渡す8つの方法とは何ですか

値を渡すメソッドには、props と "$emit"、"$attrs" と "$listeners"、セントラル イベント バス、v-model、provide と inject、"$parent" と "$children" が含まれます。 "、vuex、localStorage/セッション。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue では、コンポーネント間のメッセージングが非常に重要です。コンポーネント間のメッセージングの一般的な方法を以下にまとめます。

• props と $emit (一般的に使用される)

• $attrs と $listeners

• Centralイベント バス (非親子コンポーネント間通信)

• v-model

• ##provide および inject

• $parent と $children

• vuex

  
  

##props と $emit

親コンポーネントは prop を介して子コンポーネントにデータを渡し、子コンポーネントはイベントをトリガーする $emit を介して親コンポーネントにデータを渡します。 ##

Vue.component(&#39;child&#39;,{    data(){      return {        mymessage:this.message      }    },    template:`      <div>        <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>    `,    props:[&#39;message&#39;],//设置props属性值，得到父组件传递过来的数据    methods:{      passData(val){        //触发父组件中的事件，向父组件传值        this.$emit(&#39;getChildData&#39;,val)      }    }  })  Vue.component(&#39;parent&#39;,{    template:`      <div>        <p>this is parent compoent!</p>        <child :message="message" v-on:getChildData="getChildData"></child>      </div>    `,    data(){      return {        message:&#39;hello&#39;      }    },    methods:{      //执行子组件触发的事件      getChildData(val){        console.log(val)      }    }  })

上の例では、親コンポーネントparentと子コンポーネントchildが存在します。

親コンポーネントはメッセージ データを子コンポーネントに渡し、v-on を介して getChildData イベントをバインドして、子コンポーネントのトリガー イベントをリッスンします。

• サブコンポーネントは、props を通じて関連するメッセージ データを取得し、最後に this.$emit

• #$attrs および $listeners# を通じて getChildData イベントをトリガーします。

##親コンポーネントと子コンポーネント間のデータ送信を処理する最初の方法には問題があります。親コンポーネント A の下に子コンポーネント B があり、コンポーネント B の下にコンポーネント C がある場合、コンポーネント A が次のことを行いたい場合はどうなるでしょうか。データをコンポーネント C に渡しますか?どうすればよいですか?最初の方法を採用する場合、コンポーネント A が prop を介してコンポーネント B にメッセージを渡し、コンポーネント B が prop を介してコンポーネント C にメッセージを渡さなければなりません。コンポーネント A とコンポーネント C の間にさらにコンポーネントがある場合は、この方法を使用します。とても難しい。 Vue 2.4 では、この問題を解決するために $attrs と $listeners が提供され、コンポーネント A がコンポーネント C にメッセージを渡すことができるようになりました。

Vue.component('C',{
    template:`
      dc6dce4a544fdca2df29d5ac0ea9906b
        7d642c02fff9fdf1e7a3b0ccd8651dae 16b28748ea4df4d9c2150843fecfba68
    `,
    methods:{
      passCData(val){
        //触发父组件A中的事件
        this.$emit('getCData',val)
      }
    }
  })
  Vue.component('B',{
    data(){
      return {
        mymessage:this.message
      }
    },
    template:`
      dc6dce4a544fdca2df29d5ac0ea9906b
        7fd7f75d01cda5f402cb25a0a7de995b
        086635eb7aaa93b3bc42be25ba16f2cd
        d4ef16d70a197139b9a0445162e00bb6
        2b4f3405cb593d7dabb61895b5e4f0275f6acab10c476fc264ba16ac4aa7415c
      16b28748ea4df4d9c2150843fecfba68
    `,
    props:['message'],//得到父组件传递过来的数据
    methods:{
      passData(val){
        //触发父组件中的事件
        this.$emit('getChildData',val)
      }
    }
  })
  Vue.component('A',{
    template:`
      dc6dce4a544fdca2df29d5ac0ea9906b
        e388a4556c0f65e1904146cc1a846beethis is parent compoent!94b3e26ee717c64999d7867364b1b4a3
        e2af931dfa4ed32474136138c8cc6ea341908b66e4bc50a75b443e0dfafd01f9
      16b28748ea4df4d9c2150843fecfba68
    `,
    data(){
      return {
        message:'hello',
        messagec:'hello c' //传递给c组件的数据
      }
    },
    methods:{
      getChildData(val){
        console.log('这是来自B组件的数据')
      },
      //执行C子组件触发的事件
      getCData(val){
        console.log("这是来自C组件的数据："+val)
      }
    }
  })

セントラル イベント バス

上記の 2 つのメソッドは、親コンポーネントと子コンポーネント間のデータ転送を処理します。2 つのコンポーネントが親コンポーネントにない場合はどうなるでしょうか。子供関係??この場合、中央イベント バスを使用できます。新しい Vue イベント バス オブジェクトを作成し、bus.$emit を通じてイベントをトリガーすると、bus.$on はトリガーされたイベントをリッスンします。

Vue.component('brother1',{
    data(){      return {
        mymessage:'hello brother1'
      }
    },
    template:`      e388a4556c0f65e1904146cc1a846bee
        e388a4556c0f65e1904146cc1a846beethis is brother1 compoent!94b3e26ee717c64999d7867364b1b4a3
        7fd7f75d01cda5f402cb25a0a7de995b
      94b3e26ee717c64999d7867364b1b4a3    `,
    methods:{
      passData(val){        //触发全局事件globalEvent
        bus.$emit('globalEvent',val)
      }
    }
  })
  Vue.component('brother2',{
    template:`      e388a4556c0f65e1904146cc1a846bee
        e388a4556c0f65e1904146cc1a846beethis is brother2 compoent!94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846beebrother1传递过来的数据：{{brothermessage}}94b3e26ee717c64999d7867364b1b4a3
      94b3e26ee717c64999d7867364b1b4a3    `,
    data(){      return {
        mymessage:'hello brother2',
        brothermessage:''
      }
    },
    mounted(){      //绑定全局事件globalEvent
      bus.$on('globalEvent',(val)=>{        this.brothermessage=val;
      })
    }
  })  //中央事件总线
  var bus=new Vue();  var app=new Vue({
    el:'#app',
    template:`      e388a4556c0f65e1904146cc1a846bee
        db8e0981216ffea9e11695fcc5f3d159422ba0722828b812771cb3535114ead2
        16c7ea7f21a2f1d37ba1ce836c6f09ccd9f59e38b643491a2fad5c23f0d6a95e
      94b3e26ee717c64999d7867364b1b4a3    `
  })

provide と inject

は、Vue.js の 2.2.0

バージョンに追加されました。そしてオプションを注入します。これらはペアで表示され、親コンポーネントからデータを渡すために使用されます。

親コンポーネントのプロバイダーを通じて変数を提供し、子コンポーネントの inject を通じて変数を注入します。サブコンポーネントの深さに関係なく、inject が呼び出される限り、プロバイダー内のデータを注入できます。現在の親コンポーネントの prop 属性からのみデータを取得することに限定されるのではなく、子コンポーネントは親コンポーネントのライフサイクル内であればそれを呼び出すことができます。 <pre class="brush:js;toolbar:false;">Vue.component(&amp;#39;child&amp;#39;,{ inject:[&amp;#39;for&amp;#39;],//得到父组件传递过来的数据 data(){ return { mymessage:this.for } }, template:`}) Vue.component(&amp;#39;parent&amp;#39;,{ template:`this is parent compoent!`, provide:{ for:&amp;#39;test&amp;#39; }, data(){ return { message:&amp;#39;hello&amp;#39; } } })</pre>v-model

親コンポーネントが v-model を通じて子コンポーネントに値を渡すと、自動的に value prop 属性が渡され、これが渡されます。子コンポーネントの .$emit('input',val) は、v-model バインディング

Vue.component('child',{
    props:{
      value:String, //v-model会自动传递一个字段为value的prop属性    },
    data(){      return {
        mymessage:this.value
      }
    },
    methods:{
      changeValue(){        this.$emit('input',this.mymessage);//通过如此调用可以改变父组件上v-model绑定的值      }
    },
    template:`      e388a4556c0f65e1904146cc1a846bee
        6708e6166751e70f627e757fbdf53cce
      94b3e26ee717c64999d7867364b1b4a3  })
  Vue.component('parent',{
    template:`      e388a4556c0f65e1904146cc1a846bee
        e388a4556c0f65e1904146cc1a846beethis is parent compoent!94b3e26ee717c64999d7867364b1b4a3
        e388a4556c0f65e1904146cc1a846bee{{message}}94b3e26ee717c64999d7867364b1b4a3
        2683ad86c93f2ee4c92e7d9b5d7c94a27d4dd9c7239aac360e401efe89cbb393
      94b3e26ee717c64999d7867364b1b4a3    `,
    data(){      return {
        message:'hello'
      }
    }
  })  var app=new Vue({
    el:'#app',
    template:`      e388a4556c0f65e1904146cc1a846bee
        58652436a08d62d32b90566dafe0913cdb7b8d074c72824ed121864240fe4c81
      94b3e26ee717c64999d7867364b1b4a3    `
  })

$parent および $children

の値を自動的に変更します。コンポーネント内で実行できます。子コンポーネント $parent を通じて親コンポーネントを直接操作し、親コンポーネントは $children を通じて子コンポーネントを操作します。#

Vue.component('child',{
    props:{
      value:String, //v-model会自动传递一个字段为value的prop属性    },
    data(){      return {
        mymessage:this.value
      }
    },
    methods:{
      changeValue(){        this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值      }
    },
    template:`      <p>
        <input type="text" v-model="mymessage" @change="changeValue">
      </p>  })
  Vue.component(&#39;parent&#39;,{
    template:`      <p>
        <p>this is parent compoent!</p>
        <button @click="changeChildValue">test</button >
        <child></child>
      </p>    `,
    methods:{
      changeChildValue(){        this.$children[0].mymessage = &#39;hello&#39;;
      }
    },
    data(){      return {
        message:&#39;hello&#39;
      }
    }
  })  var app=new Vue({
    el:&#39;#app&#39;,
    template:`      <p>
        <parent></parent>
      </p>    `
  })

vuex はコンポーネント間のデータ対話を処理します

ビジネス ロジックが複雑で、多くのコンポーネントがパブリック データを同時に処理する必要がある場合、上記の方法はプロジェクトのメンテナンスに役立たない可能性があります。Vuex のアプローチは、これらのパブリック データを抽出することです。 、その後、他のコンポーネントがこの共通データを読み書きできるようになり、分離の目的が達成されます。

localStorage / sessionStorage

この種の通信は比較的単純ですが、データとステータスがわかりにくく、保守が容易ではないという欠点があります。 。 window.localStorage.getItem(key)を通してデータを取得しますGet data

Pass

window.localStorage.setItem(key,value)

ストレージデータデータ形式の変換には JSON.parse() / JSON.stringify() の使用に注意してください

localStorage / sessionStorage を vuex と組み合わせて永続的なデータ ストレージを実現し、vuex を使用して問題を解決できますデータとステータスの混乱の問題。 [関連する推奨事項:「

vue.js チュートリアル

」]

以上がVueで値を渡す8つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。