Vue 구성 요소에 값을 전달하는 방법
- 百草원래의
- 2023-07-18 09:27:46927검색
Vue 구성 요소는 다음과 같은 방법으로 값을 전달합니다. 1. 아버지에서 아들로 전달 3. 형제에서 값 전달 4. 물음표, 콜론 및 부모-자식 구성 요소로 값 전달 . "$ref"를 사용하여 값을 전달합니다. 6. "inject"를 사용하여 상위 구성 요소의 데이터를 현재 인스턴스에 삽입합니다. 7. 조상에서 손자에게 전달합니다. 9. $parent; 10. sessionStorage에 값을 전달합니다. 11. vuex.
1. 상위 구성 요소를 하위 구성 요소에 전달합니다.
하위 구성 요소에 props를 정의합니다. 즉, props:['msg'], msg는 객체 또는 기본 데이터 유형일 수 있습니다
기본값, 즉 props: {msg: {type: String, default: 'hello world'}},
기본값이 객체인 경우 유형: props: { msg: { type: Object , 기본값: () => { return { name: 'dan_seek' } } }}
이 값 전송은 단방향이므로 상위 구성 요소의 값을 변경할 수 없습니다(참조 유형 제외). 물론), props 값을 직접 수정하면 경고가 표시됩니다.
권장되는 작성 방법은 data()(Children.vue 참조)에서 변수를 재정의하고 여기에 props를 할당하는 것입니다. 물론 계산된 속성도 허용됩니다.
Children.vue
<template>
<section>
父组件传过来的消息是：{{myMsg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
props:['msg'],
data() {
return {
myMsg:this.msg
}
},
methods: {}
}
</script>Parent.vue
<template>
<div class="parent">
<Children :msg="message"></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children
},
data() {
return {
message:'hello world'
}
},
}
</script>2. 하위 구성요소를 상위 구성요소에 전달합니다.
여기에서 사용자 정의 이벤트를 사용해야 합니다. 하위 구성요소, 상위 구성요소에서 구성요소
Children.vue
<template>
<section>
<br>
<div @click="clickme">click me</div>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
childNum:0
}
},
methods: {
clickme(){
// 通过自定义事件addNum把值传给父组件
this.$emit('addNum',this.childNum++)
}
}
}
</script>Parent.vue
<template>
<div class="parent">
这里是计数：{{parentNum}}
<Children-Com @addNum="getNum"></Children-Com>
</div>
</template>
<script>
import ChildrenCom from '../components/Children'
export default {
name: 'Parent',
components: {
ChildrenCom
},
data() {
return {
parentNum: 0
}
},
methods:{
// childNum是由子组件传入的
getNum(childNum){
this.parentNum = childNum
}
}
}
</script>3에서 @myEvent 모니터링을 사용합니다. 형제 구성요소 간에 값을 전달합니다.
사용자 정의 이벤트의 트리거링 및 모니터링 기능을 사용합니다. 중간 브리지로서 모든 구성 요소에 값을 전달할 수 있는 공개 이벤트 버스인 eventBus를 정의하기 위해 방출합니다. 그리고 eventBus를 사용하면 Emit에 대한 이해가 깊어질 수 있습니다.
EventBus.js
import Vue from 'vue'export default new Vue()
Children1.vue
<template> <section> <div @click="pushMsg">push message</div> <br> </section></template><script> import eventBus from './EventBus' export default { name: "Children1", components: {}, data() { return { childNum:0 } }, methods: { pushMsg(){ // 通过事件总线发送消息 eventBus.$emit('pushMsg',this.childNum++) } } }</script>Children2.vue
<template>
<section>
children1传过来的消息：{{msg}}
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children2",
components: {},
data() {
return {
msg: ''
}
},
mounted() {
// 通过事件总线监听消息
eventBus.$on('pushMsg', (children1Msg) => {
this.msg = children1Msg
})
}
}
</script>Parent.vue
<template>
<div class="parent">
<Children1></Children1>
<Children2></Children2>
</div>
</template>
<script>
import Children1 from '../components/Children1'
import Children2 from '../components/Children2'
export default {
name: 'Parent',
components: {
Children1,
Children2
},
data() {
return {
}
},
methods:{
}
}
</script>github에는 오픈 소스 vue-bus 라이브러리도 있습니다. 참고하실 수 있습니다: https://github.com/yangmingshan/vue -bus#readme
4. 경로 간 값 전달
i. 물음표를 사용하여 값 전달
페이지 A가 페이지 B로 이동할 때 this.$router.push('/B?name=danseek')를 사용하세요. )
B 페이지에서는 $route.query.name을 사용하여 페이지 A에서 전달된 값을 가져올 수 있습니다.
위의 라우터와 경로의 차이점에 유의하세요
ii. 값을 전달하려면 콜론을 사용하세요
다음 경로를 구성하세요.
{
path: '/b/:name',
name: 'b',
component: () => import( '../views/B.vue')
},페이지 B에서 this.$route .params.name을 전달하여 경로에 의해 전달된 이름의 값을 얻을 수 있습니다
iii 값을 전달하려면 상위-하위 구성 요소를 사용하세요.
라우터가- 뷰 자체도 구성 요소이므로 상위-하위 구성 요소를 사용하여 값을 전달할 수도 있으며 해당 하위 페이지에 소품 추가는 유형이 업데이트된 후 경로가 새로 고쳐지지 않기 때문에 최신 항목을 직접 얻을 수 없습니다. 대신, watch를 사용해야 합니다.
<router-view :type="type"></router-view>
// 子页面
......
props: ['type']
......
watch: {
type(){
// console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
},
},5. $ref를 사용하여 값 전달
$ref 기능을 사용하여 하위 구성 요소의 ID를 정의하세요. 상위 구성 요소는 이 ID를 통해 하위 구성 요소의 메서드와 속성에 직접 액세스할 수 있습니다.
먼저 정의하세요. 하위 구성 요소 Children.vue
<template>
<section>
传过来的消息：{{msg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
msg: '',
desc:'The use of ref'
}
},
methods:{
// 父组件可以调用这个方法传入msg
updateMsg(msg){
this.msg = msg
}
},
}
</script>그런 다음 상위 구성 요소 Parent.vue에서 Children.vue를 참조하고 ref 속성을 정의합니다
<template>
<div class="parent">
<!-- 给子组件设置一个ID ref="children" -->
<Children ref="children"></Children>
<div @click="pushMsg">push message</div>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'parent',
components: {
Children,
},
methods:{
pushMsg(){
// 通过这个ID可以访问子组件的方法
this.$refs.children.updateMsg('Have you received the clothes？')
// 也可以访问子组件的属性
console.log('children props:',this.$refs.children.desc)
}
},
}
</script>6. 종속성 주입을 사용하여 이를 자손과 증손자에게 전달합니다.
부모 구성 요소에 모든 자손에게 제공되어야 하는 메소드 getName()
provide: function () {
return {
getName: this.getName()
}
}제공 옵션을 사용하면 자손 컴포넌트에 제공하려는 데이터/메서드를 지정할 수 있습니다.
그런 다음 모든 자손 컴포넌트에서 주입을 사용하여 상위 구성 요소의 데이터/메서드를 현재 인스턴스에 추가:
inject: ['getName']
Parent.vue
<template>
<div class="parent">
<Children></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children,
},
data() {
return {
name:'dan_seek'
}
},
provide: function () {
return {
getName: this.name
}
},
}
</script>Children.vue
父组件传入的值：{{getName}}
<script>
export default {
name: "Children",
components: {},
data() {
return {
}
},
inject: [&#39;getName&#39;],
}
</script>7. 조상 손자 $attrs
일반적으로 중간 전환으로 아버지의 props를 사용해야 하지만, 이런 식으로 아버지 구성 요소는 상위 구성 요소 비즈니스와 관련이 없는 더 많은 것을 갖게 됩니다. 속성, 높은 결합도는 $attrs의 도움으로 단순화될 수 있으며 조상이나 손자 모두 수정할 필요가 없습니다
GrandParent. vue
<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>Parent.vue
<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>Children.vue
<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>표시 결과
부모 구성 요소 수신됨
할아버지 이름: grandParent
하위 구성 요소 수신됨
할아버지 이름:
할아버지 성별 : 남자
할아버지 나이: 88세
할아버지의 취미: code
8, 손자의 조상
$listeners 중간 이벤트의 도움으로 손자가 조상에게 편리하게 알릴 수 있는 코드 예시는 7
9, $parent
부모님을 얻을 수 있습니다. 상위 구성 요소 인스턴스를 통해 상위 구성 요소의 속성과 메서드에 액세스할 수 있으며, 루트 구성 요소 인스턴스도 얻을 수 있습니다.
구문:
// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()
따라서 하위 구성 요소를 상위 구성 요소에 전달하는 예에서는 this.$parent.getNum(100)을 사용하여 상위 구성 요소에 값을 전달할 수 있습니다.
10. 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)를 사용하여 이를 문자열로 변환해야 합니다. 저장합니다(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)
11, vuex
이 유명한 vuex의 사용 방법을 여기서는 소개하지 않겠습니다. 명확하게 작성하려면 너무 길어질 것이기 때문입니다...
대규모 단일 페이지 애플리케이션을 개발할 계획이 없다면 Vuex를 사용하는 것이 어려울 수 있습니다. 번거롭고 중복됩니다. 사실입니다. 앱이 충분히 단순하다면 Vuex를 사용할 필요가 없을 수도 있습니다.
위 내용은 Vue 구성 요소에 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!