Übertragungsmethode: 1. Verwenden Sie „props“ in der übergeordneten Komponente, um Daten an die untergeordnete Komponente zu übertragen. 2. Die untergeordnete Komponente verwendet „this.$emit(„event“)“, um Daten an die übergeordnete Komponente zu übertragen. Verwenden Sie gemeinsame Dateien zwischen Geschwisterkomponenten. Übergeben Sie Daten. 4. Verwenden Sie „ref/refs“, um Daten zwischen übergeordneten und untergeordneten Komponenten zu übertragen. 5. Verwenden Sie Vuex, um Daten usw. zu übertragen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
(1) Binden Sie eine Eigenschaft an die untergeordnete Komponentenbezeichnung der übergeordneten Komponente und mounten Sie die zu übertragenden Variablen.
(2) Akzeptieren Sie Daten über Requisiten in der untergeordneten Komponente be Arrays können auch Objekte sein und die empfangenen Daten können direkt verwendet werden props: ["property name"] props: {property name: data type}
Codebeispiel:
//父组件
<template>
<p>
<i>父组件</i>
<!--页面使用-->
<son :data='name'></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: '子组件',
props:["data"],
};
</script> (1) Passen Sie ein Ereignis auf der Bezeichnung der untergeordneten Komponente der übergeordneten Komponente an und rufen Sie dann die erforderliche Methode auf.
(2) Verwenden Sie this.$emit("event") in der Methode der untergeordneten Komponente, um das in definierte Ereignis auszulösen Die Daten werden
Codebeispiel in Form von Parametern übergeben:
//父组件
<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('子传父')
}
},
};
</script>//子组件
<template>
<p>
<button @click="lcalter">点我</button>
</p>
</template>
<script>
export default {
components: { },
name: '子组件',
methods: {
lcalter(){
this.$emit('lcclick')//通过emit来触发事件
}
},
};
</script> (1) Erstellen Sie eine neue Bus.js-Datei in src und exportieren Sie dann eine leere Vue-Instanz
(2) Führen Sie Bus.js auf der Seite ein, die Daten überträgt, und versenden Sie dann Ereignisse über Bus "). , die Daten werden von emit("event name", "parameter") versendet und die Daten werden in Form von Parametern von emit()
(3) übergeben. Führen Sie Bus.js auf der Seite ein, die die Daten akzeptiert und verwenden Sie dann Bus.$ on("Event Name", (Daten) =>{Daten sind die akzeptierten Daten})
Bildbeispiel:
(1) Wenn ref für ein normales DOM-Element verwendet wird, zeigt die Referenz auf das DOM-Element; wenn es für eine Unterkomponente verwendet wird, zeigt die Referenz auf die Komponenteninstanz
(2 ) Sie können die Methode der Komponente direkt aufrufen oder über die Instanz auf Daten zugreifen. Es kann auch als eine Möglichkeit für untergeordnete Komponenten betrachtet werden, Werte an übergeordnete Komponenten zu übertragen. und dann auf Mutationen in Aktionen festlegen, und Mutationen werden dann weitergegeben. Die logische Operation ändert den Zustand, synchronisiert ihn dadurch mit der Komponente und aktualisiert ihren Datenstatus
Codebeispiel:
//父组件
<template>
<p>
<button @click="sayHello">sayHello</button>
<child ref="childForRef"></child>
</p>
</template>
<script>
import child from './child.vue'
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: '我是 child',
}
},
methods: {
sayHello () {
console.log('hello');
alert('hello');
}
}
}
</script>//父组件
template>
<p id="app">
<ChildA/>
<ChildB/>
</p>
</template>
<script>
import ChildA from './ChildA' // 导入A组件
import ChildB from './ChildB' // 导入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: 'Hello，B组件，我是A组件'
}
},
computed: {
BMessage() {
// 这里存储从store里获取的B组件的数据
return this.$store.state.BMsg
}
},
methods: {
transform() {
// 触发receiveAMsg，将A组件的数据存放到store里去
this.$store.commit('receiveAMsg', {
AMsg: this.AMessage
})
}
}
}
</script>Sie können das erhalten Über die übergeordnete Komponenteninstanz können Sie dann über diese Instanzmethode auf die Eigenschaften und Attribute der übergeordneten Komponente zugreifen. Sie verfügt auch über eine übergeordnete übergeordnete Komponente, die die Instanz der übergeordneten Komponente abrufen kann, und Sie können dann auf die Eigenschaften und Methoden der übergeordneten Komponente zugreifen Über diese Instanz verfügt sie auch über eine übergeordnete Komponente, die die übergeordnete Komponenteninstanz abrufen kann. Über diese Instanz können Sie dann auf die Eigenschaften und Methoden der übergeordneten Komponente zugreifen. Außerdem gibt es eine übergeordnete Komponente, über die die übergeordnete Komponenteninstanz abgerufen werden kann .
Codebeispiel:
//子组件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: 'Hello，A组件，我是B组件'
}
},
computed: {
AMessage() {
// 这里存储从store里获取的A组件的数据
return this.$store.state.AMsg
}
},
methods: {
transform() {
// 触发receiveBMsg，将B组件的数据存放到store里去
this.$store.commit('receiveBMsg', {
BMsg: this.BMessage
})
}
}
}
</script>sessionStorage ist ein globales Objekt des Browsers und die darin gespeicherten Daten werden gelöscht, wenn die Seite geschlossen wird. Mit dieser Funktion können wir eine Kopie der Daten auf allen Seiten teilen.
Codebeispiel:
//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
})Empfehlen Sie einen Bibliotheks-Good-Storage, der sessionStorage kapselt, und Sie können seine API direkt zum Speichern von Objekten verwenden
// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz() //在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。
8. Routing-Wertübertragung
Verwenden Sie das Fragezeichen, um den Wert zu übertragenVerwenden Sie dies, wenn zu Seite A gesprungen wird Seite B. r o u t e r . p u s h ( ' / B ? n a m e = d a n s e e k ' ) Seite B kann t h i s verwenden. router.push('/B?name=danseek') Seite B kann this.router.push('/B?name verwenden =danseek') B-Seite kann this.route.query.name verwenden, um den von A-Seite übergebenen Wert abzurufen Folgende Route:
// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();
Verwenden Sie die Eltern-Kind-Komponente, um den Wert zu übergebenSeit der Router-Ansicht selbst Da die Route nach der Typaktualisierung nicht aktualisiert wird, können wir den neuesten Typwert nicht direkt abrufen Stattdessen müssen Sie watch verwenden
<router-view :type="type"></router-view>
// 子页面
props: ['type']
watch: {
type(){
// console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
},
},正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改
祖组件：
<template>
<section>
<parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
</section>
</template>
<script>
import Parent from './Parent'
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 './Children'
export default {
name: "Parent",
components: {
Children
},
// 父组件接收了name,所以name值是不会传到子组件的
props:['name'],
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:['sex','age','hobby','name'],
data() {
return {}
},
methods: {
sayKnow(){
this.$emit('sayKnow','我知道啦')
}
},
mounted() {
}
}
</script>文字内容同第九个
祖组件
<template>
<p id="app">
<children-one @eventOne="eventOne"></children-one>
{{ msg }}
</p>
</template>
<script>
import ChildrenOne from '../src/components/children.vue'
export default {
name: 'App',
components: {
ChildrenOne,
},
data() {
return {
msg: ''
}
},
methods: {
eventOne(value) {
this.msg = value
}
}
}
</script>父组件
<template>
<p>
<children-two v-on="$listeners"></children-two>
</p>
</template>
<script>
import ChildrenTwo from './childrenTwo.vue'
export default {
name: 'childrenOne',
components: {
ChildrenTwo
}
}
</script>子组件
<template>
<p>
<button @click="setMsg">点击传给祖父</button>
</p>
</template>
<script>
export default {
name: 'children',
methods: {
setMsg() {
this.$emit('eventOne', '123')
}
}
}
</script>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教程》
Das obige ist der detaillierte Inhalt vonWelche verschiedenen Möglichkeiten gibt es, Daten in VueJS zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
