cari

Rumah  >  Artikel  >  hujung hadapan web  >  vue传值有哪8种方法

vue传值有哪8种方法

醉折花枝作酒筹
醉折花枝作酒筹asal
2021-04-27 17:35:0713688semak imbas

传值方式有：props和“$emit”、“$attrs”和“$listeners”、中央事件总线、v-model、provide和inject、“$parent”和“$children”、vuex、localStorage/session。

vue传值有哪8种方法

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。

  • props和$emit(常用)

  • $attrs和$listeners

  • 中央事件总线（非父子组件间通信）

  • 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。

  • 父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件；

  • 子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件

$attrs和$listeners

第一种方式处理父子组件之间的数据传输有一个问题：如果父组件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)
      }
    }
  })

中央事件总线

上面两种方式处理的都是父子组件之间的数据传递，而如果两个组件不是父子关系呢？这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象，然后通过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+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

Vue.component(&#39;child&#39;,{
    inject:[&#39;for&#39;],//得到父组件传递过来的数据
    data(){
      return {
        mymessage:this.for
      }
    },
    template:`})
  Vue.component(&#39;parent&#39;,{
    template:`this is parent compoent!`,
    provide:{
      for:&#39;test&#39;
    },
    data(){
      return {
        message:&#39;hello&#39;
      }
    }
  })

v-model

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$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(&#39;child&#39;,{
    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) 获取数据

通过window.localStorage.setItem(key,value) 存储数据

注意用JSON.parse() / JSON.stringify() 做数据格式转换

localStorage / sessionStorage可以结合vuex，实现数据的持久保存，同时使用vuex解决数据和状态混乱问题。

【相关推荐：《vue.js教程》】

Atas ialah kandungan terperinci vue传值有哪8种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：通过代码实例，带你了解v-model（值得收藏）！Artikel seterusnya：vue组件中如何引入css文件

Artikel berkaitan

Lihat lagi