Vue에서 값을 전달하는 8가지 방법은 무엇입니까?
- 醉折花枝作酒筹원래의
- 2021-04-27 17:35:0713768검색
값 전달 방법에는 props 및 "$emit", "$attrs" 및 "$listeners", 중앙 이벤트 버스, v-model, 제공 및 주입, "$parent" 및 "$children", vuex, localStorage/가 포함됩니다. 세션.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
Vue의 경우 구성 요소 간 메시징은 매우 중요합니다. 다음은 구성 요소 간 메시징의 일반적인 방법을 요약한 것입니다.
props 및 $emit(일반적으로 사용됨)
$attrs 및 $listeners
중앙 이벤트 버스(비상위-하위 구성 요소 간 통신)
v-model
-
제공 및 주입
$parent 및 $children
vuex
props 및 $emit
상위 구성 요소는 prop을 통해 데이터를 하위 구성 요소에 전달합니다. , 그리고 하위 구성 요소는 $emit를 통해 이벤트를 트리거하여 상위 구성 요소에 데이터를 전달합니다.
Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div> `, props:['message'],//设置props属性值，得到父组件传递过来的数据 methods:{ passData(val){ //触发父组件中的事件，向父组件传值 this.$emit('getChildData',val) } } }) Vue.component('parent',{ template:` <div> <p>this is parent compoent!</p> <child :message="message" v-on:getChildData="getChildData"></child> </div> `, data(){ return { message:'hello' } }, methods:{ //执行子组件触发的事件 getChildData(val){ console.log(val) } } })위의 예에는 상위 구성 요소와 하위 구성 요소가 있습니다.
상위 구성 요소는 메시지 데이터를 하위 구성 요소에 전달하고 v-on을 통해 getChildData 이벤트를 바인딩하여 하위 구성 요소의 트리거 이벤트를 수신합니다.
하위 구성 요소는 다음을 통해 관련 메시지 데이터를 가져옵니다. $emit가 getChildData 이벤트를 트리거했습니다
$attrs 및 $listeners
상위 구성 요소와 하위 구성 요소 간의 데이터 전송을 처리하는 첫 번째 방법에는 문제가 있습니다. 하위 구성 요소 B가 아래에 있는 경우 상위 구성 요소 A, 구성 요소 B가 그 아래에 구성 요소 C가 있습니다. 구성 요소 A가 구성 요소 C에 데이터를 전달하려고 하면 어떻게 될까요? 첫 번째 방법을 채택하는 경우 구성 요소 A와 구성 요소 C 사이에 더 많은 구성 요소가 있는 경우 구성 요소 A가 prop을 통해 구성 요소 B에 메시지를 전달하고 구성 요소 B가 메시지를 구성 요소 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.$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 and inject
Vue.js 2.2.0+2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。
父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。
Vue.component('child',{
inject:['for'],//得到父组件传递过来的数据
data(){
return {
mymessage:this.for
}
},
template:`})
Vue.component('parent',{
template:`this is parent compoent!`,
provide:{
for:'test'
},
data(){
return {
message:'hello'
}
}
})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('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('parent',{
template:` <p>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</p> `,
methods:{
changeChildValue(){ this.$children[0].mymessage = 'hello';
}
},
data(){ return {
message:'hello'
}
}
}) var app=new Vue({
el:'#app',
template:` <p>
<parent></parent>
</p> `
})vuex处理组件之间的数据交互
如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候才有上面这一些方法可能不利于项目的维护，vuex的做法就是将这一些公共的数据抽离出来，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。
localStorage / sessionStorage
这种通信比较简单，缺点是数据和状态比较混乱，不太容易维护。
通过window.localStorage.getItem(key) 获取数据
通过window.localStorage.setItem(key,value) 버전에 제공 및 주입 옵션이 추가되었습니다. 이들은 쌍으로 나타나며 상위 구성 요소에서 데이터를 아래로 전달하는 데 사용됩니다.
부모 컴포넌트에서 공급자를 통해 변수를 제공한 다음 자식 컴포넌트에 주입을 통해 변수를 주입합니다. 하위 구성 요소의 깊이에 관계없이 주입이 호출되는 한 공급자의 데이터를 주입할 수 있습니다. 현재 상위 구성 요소의 prop 속성에서만 데이터를 가져오는 것으로 제한되는 대신 하위 구성 요소는 상위 구성 요소의 수명 주기 내에 있는 한 이를 호출할 수 있습니다.
rrreeev-model상위 구성 요소가 v-model을 통해 하위 구성 요소에 값을 전달하면 자동으로 value prop 속성이 전달되며, 이 속성은 this를 통해 하위 구성 요소에서 자동으로 수정됩니다.$emit( 'input',val) v-model
rrreee🎜🎜$parent 및 $children🎜🎜🎜🎜으로 바인딩된 값은 하위 컴포넌트인 $parent를 통해 상위 컴포넌트에 직접 연산이 가능하고, 상위 컴포넌트는 위에서 연산이 가능합니다. $children을 통해 하위 구성 요소를 생성합니다.🎜rrreee🎜 🎜vuex는 구성 요소 간의 데이터 상호 작용을 처리합니다🎜🎜🎜🎜비즈니스 로직이 복잡하고 많은 구성 요소가 일부 공통 데이터를 동시에 처리해야 하는 경우 위의 방법은 도움이 되지 않을 수 있습니다. vuex가 하는 일은 이러한 공통 데이터를 추출한 다음 다른 구성 요소가 이 공통 데이터를 읽고 쓸 수 있어 디커플링의 목적을 달성하는 것입니다. 🎜🎜🎜localStorage / sessionStorage🎜🎜🎜🎜이런 종류의 통신은 상대적으로 간단합니다. 단점은 데이터와 상태가 지저분하고 유지 관리가 쉽지 않다는 것입니다. 🎜🎜window.localStorage.getItem(key)를 통해 데이터 가져오기 🎜🎜window.localStorage.setItem(key, value)를 통해 데이터 저장 🎜🎜JSON.parse( ) / 데이터 형식 변환을 위한 JSON.stringify() 🎜🎜localStorage / sessionStorage를 vuex와 결합하여 지속적인 데이터 저장을 달성하는 동시에 vuex를 사용하여 데이터 및 상태 혼란 문제를 해결할 수 있습니다. 🎜🎜【관련 추천: "🎜vue.js tutorial🎜"】🎜위 내용은 Vue에서 값을 전달하는 8가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!