Apakah beberapa cara untuk menghantar data dalam vuejs

Kaedah penghantaran: 1. Gunakan "props" dalam komponen induk untuk memindahkan data ke komponen anak 2. Komponen anak menggunakan "this.$emit("event")" untuk memindahkan data kepada induk Komponen;

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1. Pemindahan ibu bapa kepada anak

(1) Ikat atribut pada label komponen anak komponen induk dan lekapkan pembolehubah untuk dipindahkan

(2 ) Dalam Subkomponen menerima data melalui props boleh berupa tatasusunan atau objek Data yang diterima boleh digunakan secara langsung props: ["property name"] props:{property name: data type}

Contoh kod. :

//父组件
<template>
  <p>
    <i>父组件</i>
    <!--页面使用-->
    <son :data=&#39;name&#39;></son> 
  </p>
</template>

<script>
import son from "./son.vue";//导入父组件
export default {
  components: { son },//注册组件
  name: "父组件",
  data() {
    return {
      name: "Frazier", //父组件定义变量
    };
  },
};
</script>

//子组件
<template>
  <p>{{data}}</p>
</template>

<script>
export default {
components: { },
  name: &#39;子组件&#39;,
  props:["data"],
};
</script>

2. Lulus daripada anak kepada ibu bapa

(1) Sesuaikan acara pada label komponen anak komponen induk, dan kemudian panggil yang diperlukan Kaedah
(2) Gunakan ini.$emit("event") dalam kaedah komponen anak untuk mencetuskan peristiwa yang ditakrifkan dalam komponen induk Data dihantar dalam bentuk parameter

Contoh kod:

//父组件
<template>
  <p>
    <i>父组件</i>
    <!--页面使用-->
    <son @lcclick="lcclick"></son>//自定义一个事件
  </p>
</template>

<script>
import son from "./son.vue"; //导入父组件
export default {
  components: { son }, //注册组件
  name: "父组件",
  data() {
    return {};
  },
  methods: {
    lcclick(){
      alert(&#39;子传父&#39;)
    }
  },
};
</script>

//子组件
<template>
  <p>
    <button @click="lcalter">点我</button>
  </p>
</template>

<script>
export default {
components: { },
  name: &#39;子组件&#39;,
  methods: {
    lcalter(){
      this.$emit(&#39;lcclick&#39;)//通过emit来触发事件
    }
  },
};
</script>

3 Komunikasi komponen Brother (bas)

(1) Buat fail Bus.js baharu dalam src dan eksportnya An. contoh vue kosong
(2) Perkenalkan Bus.js di sebelah yang menghantar data dan kemudian menghantar peristiwa melalui Bas ("nama acara", "parameter"). ") untuk menghantar peristiwa, data adalah untuk menghantar peristiwa dalam bentuk emit("Nama acara", "Parameter"), data dihantar dalam bentuk parameter emit()
(3) Dalam data yang diterima Satu pihak memperkenalkan Bus.js dan kemudian melepasi Bus.$on("nama acara", (data)=>{data ialah data yang diterima})

Contoh gambar:

Four.ref/refs (komunikasi komponen ibu bapa-anak)

(1 ) ref Jika digunakan pada elemen DOM biasa, rujukan menunjuk kepada elemen DOM jika digunakan pada sub-komponen, merujuk kepada contoh komponen
(2) Anda boleh memanggil kaedah komponen secara terus atau akses data melalui contoh. Ia juga boleh dianggap sebagai sejenis komponen anak yang menghantar nilai kepada komponen induk

Contoh kod:

//父组件
<template>
  <p>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </p>
</template>
<script>
import child from &#39;./child.vue&#39;
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>

//子组件
<template>
  <p>child 的内容</p>
</template>
<script>
export default {
  data () {
    return {
      name: &#39;我是 child&#39;,
    }
  },
  methods: {
    sayHello () {
      console.log(&#39;hello&#39;);
      alert(&#39;hello&#39;);
    }
  }
}
</script>

5. Komunikasi Vuex

komponen Melalui penghantaran kepada tindakan, tindakan adalah operasi tak segerak, dan kemudian melakukan mutasi dalam tindakan, kemudian menukar keadaan melalui operasi logik, dengan itu menyegerakkan kepada komponen dan mengemas kini status datanya

. Contoh kod:

//父组件
template>
  <p id="app">
    <ChildA/>
    <ChildB/>
  </p>
</template>
<script>
  import ChildA from &#39;./ChildA&#39; // 导入A组件
  import ChildB from &#39;./ChildB&#39; // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>

//子组件A
<template>
 <p id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </p>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: &#39;Hello，B组件，我是A组件&#39;
     }
   },
   computed: {
     BMessage() {
       // 这里存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit(&#39;receiveAMsg&#39;, {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>

//子组件B
<template>
 <p id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </p>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: &#39;Hello，A组件，我是B组件&#39;
     }
   },
   computed: {
     AMessage() {
       // 这里存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit(&#39;receiveBMsg&#39;, {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>

//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

6.$parent

Anda boleh mendapatkan contoh komponen induk melalui induk, dan kemudian anda boleh mengakses sifat dan kaedah komponen induk melalui contoh ini Ia juga mempunyai ibu bapa saudara yang boleh mendapatkan contoh komponen induk, dan kemudian anda boleh mengakses sifat dan kaedah komponen induk melalui contoh ini dapatkan contoh komponen induk, dan kemudian anda boleh mengakses sifat dan kaedah komponen induk melalui Kaedah contoh ini, ia juga mempunyai akar saudara, yang boleh mendapatkan contoh komponen akar.

Contoh kod:

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

//在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

7 nilai hantaran sessionStorage

sessionStorage ialah objek global penyemak imbas dan data yang disimpan di dalamnya. akan Dikosongkan apabila halaman ditutup. Menggunakan ciri ini, kami boleh berkongsi salinan data merentas semua halaman.

Contoh kod:

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

Nota: Ia menyimpan pasangan nilai kunci, yang hanya boleh menjadi jenis rentetan Jika anda ingin menyimpan objek, anda perlu gunakan let objStr = JSON.stringify(obj) ditukar menjadi rentetan dan kemudian disimpan (biar obj = JSON.parse(objStr) dihuraikan menjadi objek apabila digunakan).

Syorkan storan baik perpustakaan, yang merangkum sessionStorage dan boleh terus menggunakan APInya untuk menyimpan objek

//localStorage
 storage.set(key,val) 
 storage.get(key, def)
//sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)

8 Pemindahan nilai penghalaan

gunakan Soalan nilai lulus tanda

Apabila halaman A melompat ke halaman B, gunakan ini =danseek') Halaman B boleh menggunakan ini.router.push('/B?name=danseek') Halaman B boleh menggunakan. this.route.query.name untuk mendapatkan nilai yang dihantar dari halaman A

Seperti di atas Perhatikan perbezaan antara penghala dan laluan

Gunakan titik bertindih untuk menghantar nilai

Konfigurasikan laluan berikut:

{
    path: '/b/:name',
    name: 'b',
    component: () => import( '../views/B.vue')
 },

Pada halaman B, anda boleh melepasi ini.$route .params.name untuk mendapatkan nilai nama yang dihantar melalui laluan

Gunakan komponen induk-anak untuk menghantar nilai
Memandangkan paparan penghala itu sendiri juga merupakan komponen, kami juga boleh menggunakan komponen induk-anak untuk menghantar nilai, dan kemudian Tambahkan prop ke subhalaman yang sepadan Kerana laluannya tidak dimuat semula selepas jenis dikemas kini, anda tidak boleh mendapatkan nilai jenis terkini secara langsung dalam cangkuk yang dipasang pada subhalaman Sebaliknya, gunakan jam tangan

<router-view :type="type"></router-view>

// 子页面
props: [&#39;type&#39;]
watch: {
       type(){
           // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
       },
},

九.祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改

祖组件：

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from &#39;./Parent&#39;
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

父组件

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from &#39;./Children&#39;

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:[&#39;name&#39;],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

子组件

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:[&#39;sex&#39;,&#39;age&#39;,&#39;hobby&#39;,&#39;name&#39;],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit(&#39;sayKnow&#39;,&#39;我知道啦&#39;)
      }
    },
    mounted() {
    }
  }
</script>

十.孙传祖使用$listeners

文字内容同第九个

祖组件

<template>
  <p id="app">
    <children-one @eventOne="eventOne"></children-one>
    {{ msg }}
  </p>
</template>
<script>
import ChildrenOne from &#39;../src/components/children.vue&#39;
export default {
  name: &#39;App&#39;,
  components: {
    ChildrenOne,
  },
  data() {
    return {
      msg: &#39;&#39;
    }
  },
  methods: {
    eventOne(value) {
      this.msg = value
    }
  }
}
</script>

父组件

<template>
  <p>
    <children-two v-on="$listeners"></children-two>
  </p>
</template>

<script>
import ChildrenTwo from &#39;./childrenTwo.vue&#39;

export default {
  name: &#39;childrenOne&#39;,
  components: {
    ChildrenTwo
  }
}
</script>

子组件

<template>
  <p>
    <button @click="setMsg">点击传给祖父</button>
  </p>
</template>

<script>
export default {
  name: &#39;children&#39;,
  methods: {
    setMsg() {
      this.$emit(&#39;eventOne&#39;, &#39;123&#39;)
    }
  }
}
</script>

十一.promise传参

promise 中 resolve 如何传递多个参数

//类似与这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。

如果想多个用数组，或者对象方式。。

数组

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})

十二.全局变量

定义一个全局变量，在有值的组件直接赋值，在需要的组件内直接使用就可以了，具体的话看我这篇博客就可以，
博客链接点击就好 全局变量 篇

到此这篇关于vue传值方式的十二种方法总结的文章就介绍到这了,更多相关vue传值方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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

Atas ialah kandungan terperinci Apakah beberapa cara untuk menghantar data dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!