vuejs에서 데이터를 전달하는 여러 가지 방법은 무엇입니까?
- 青灯夜游원래의
- 2021-09-24 17:53:351914검색
전송 방법: 1. 상위 구성 요소의 "props"를 사용하여 하위 구성 요소로 데이터를 전송합니다. 2. 하위 구성 요소는 "this.$emit("event")"를 사용하여 상위 구성 요소로 데이터를 전송합니다. 형제 구성 요소 간에 공통 파일을 사용합니다. 데이터를 전달합니다. 4. "ref/refs"를 사용하여 상위 구성 요소와 하위 구성 요소 간에 데이터를 전달합니다. 5. Vuex를 사용하여 데이터를 전달합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
1. 상위-하위 전송
(1) 상위 컴포넌트의 하위 컴포넌트 라벨에 속성을 바인딩하고 전송할 변수를 마운트합니다.
(2) 하위 컴포넌트의 props를 통해 데이터를 수락할 수 있습니다. be 배열도 객체일 수 있으며 수신된 데이터를 직접 사용할 수 있습니다. props: ["속성 이름"] props: {속성 이름: 데이터 유형}
코드 예:
//父组件
<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>2. 자식에서 부모로 전달
(1) 상위 구성 요소의 하위 구성 요소 태그에 대한 이벤트를 사용자 정의한 다음 필요한 메서드를 호출합니다.
(2) 하위 구성 요소의 메서드에서 this.$emit("event")를 사용하여 상위 구성 요소에 정의된 이벤트를 트리거합니다. 데이터는
매개 변수 형식으로 전달된 코드 예:
//父组件
<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>3. Brother 구성 요소 통신(버스)
(1) src에 새 Bus.js 파일을 만든 다음 빈 vue를 내보냅니다. 인스턴스
(2) 데이터를 전송하는 측에 Bus.js를 도입한 다음 버스를 통해 이벤트를 전달합니다. ("이벤트 이름", "매개변수") 데이터는 방출("이벤트 이름", "매개변수")에 의해 전달됩니다. . , 데이터는 Emit("event name", "parameter")에 의해 전달되며 데이터는 Emit()
(3) 데이터를 받아들이는 측에 Bus.js를 도입한 다음 Bus.$ on("이벤트 이름", (데이터) =>{data는 허용되는 데이터입니다})
사진 예:
IV.ref/refs( 상위-하위 구성 요소 통신)
(1) ref가 일반 DOM 요소에 사용되면 참조는 DOM 요소를 가리키고, 하위 구성 요소에 사용되면 참조는 구성 요소 인스턴스를 가리킵니다. 구성 요소의 메서드를 직접 호출하거나 인스턴스를 통해 데이터에 액세스할 수 있습니다. 이는 하위 구성 요소가 상위 구성 요소에 값을 전송하는 방법으로 간주될 수도 있습니다.
코드 예:
//父组件
<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> 5. Vuex 통신 구성 요소는 디스패치를 통해 작업에 디스패치되며 작업은 비동기 작업입니다. 그런 다음 작업에서 변형을 커밋하고 변형을 통과합니다. 논리 연산은 상태를 변경하여 구성 요소와 동기화하고 데이터 상태를 업데이트합니다
코드 예:
//父组件
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>//子组件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>//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을 얻을 수 있습니다. 상위 구성 요소 인스턴스를 통해 상위 구성 요소 인스턴스를 생성한 다음 이 인스턴스를 통해 상위 구성 요소의 속성 및 속성에 액세스할 수 있습니다. 이 인스턴스를 통해 상위 구성 요소에는 상위 구성 요소 인스턴스를 가져올 수 있는 형제 상위가 있으며, 이 인스턴스를 통해 상위 구성 요소의 속성에 액세스할 수 있으며 루트 구성 요소를 가져올 수 있는 형제 루트도 있습니다. 사례.
코드 예:
// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz() //在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。7.sessionStorage 값 전달sessionStorage는 브라우저의 전역 개체이며, 페이지가 닫히면 여기에 저장된 데이터가 삭제됩니다. 이 기능을 사용하면 모든 페이지에서 데이터 사본을 공유할 수 있습니다.
코드 예:
// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();참고: 문자열 유형만 가능한 키-값 쌍을 저장하려면 let objStr = JSON.stringify(obj)를 사용하여 이를 다음으로 변환해야 합니다. 문자열과 Storage(사용하는 경우 obj = JSON.parse(objStr)가 이를 객체로 구문 분석합니다). sessionStorage를 캡슐화한 good-storage 라이브러리를 추천하고 해당 API를 사용하여 객체를 직접 저장할 수 있습니다
//localStorage storage.set(key,val) storage.get(key, def) //sessionStorage storage.session.set(key, val) storage.session.get(key, val)8. 라우팅 값 전송
물음표를 사용하여 값을 전송하세요
페이지 A가 다음으로 이동할 때 사용하세요. 페이지 B. 라우터 . push h ( ' / B ? n a m e = d an seek ' ) 페이지 B는 이것을 사용할 수 있습니다. router.push('/B?name=danseek') 페이지 B는 this.router.push('/B?name을 사용할 수 있습니다. =danseek' )B 페이지는 this.route.query.name을 사용하여 A 페이지에서 전달된 값을 가져올 수 있습니다
위 라우터와 경로의 차이점에 주의하세요값을 전달하려면 콜론을 사용하세요
구성 다음 경로:
{
path: '/b/:name',
name: 'b',
component: () => import( '../views/B.vue')
},B페이지에서 this.$route.params.name을 통해 경로가 전달한 이름의 값을 얻을 수 있습니다.값을 전달하려면 상위-하위 구성 요소를 사용하세요라우터-뷰 자체이므로 또한 구성 요소이므로 상위-하위 구성 요소를 사용하여 값을 전달한 다음 해당 하위 페이지에 소품을 추가할 수도 있습니다. 유형이 업데이트된 후 경로가 새로 고쳐지지 않기 때문에 최신 유형 값을 직접 얻을 수 없습니다. 대신에 watch
를 사용해야 합니다.<router-view :type="type"></router-view>
// 子页面
props: ['type']
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 './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>十.孙传祖使用$listeners
文字内容同第九个
祖组件
<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传参
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教程》
위 내용은 vuejs에서 데이터를 전달하는 여러 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!