Vue 구성 요소에 데이터를 전달하는 단계에 대한 자세한 설명

이번에는 vue 컴포넌트에서 데이터를 전달하는 단계에 대해 자세히 설명하겠습니다. vue 컴포넌트에서 데이터를 전달할 때 주의 사항은 무엇입니까?

Vue의 구성 요소 범위는 모두 격리되어 있으며 하위 구성 요소의 템플릿 내에서 상위 구성 요소의 데이터를 직접 참조허용하지 않습니다. 구성 요소 간에 데이터를 전송하려면 특정 방법을 사용해야 합니다. 구성 요소 간에 데이터가 전달되는 상황은 대략 세 가지입니다.

상위 구성 요소는 데이터를 하위 구성 요소에 전달하고 데이터는 props를 통해 전달됩니다.

하위 구성 요소는 이벤트를 통해 상위 구성 요소에 데이터를 전달합니다.

이벤트 버스를 통해 두 형제 구성 요소 간에 데이터를 전송합니다.

1. 상위 구성 요소는 하위 구성 요소에 데이터를 전달합니다.

하위 구성 요소 부분:

<template>
  <p class="child">
    {{ msg }}
  </p>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

child.vue에서 msg는 데이터에 정의된 변수입니다. 상위 구성 요소의 props: ['msg']를 사용하세요.

Parent 구성 요소 부분에서 msg 값 가져오기:

<template>
  <p class="child">
    child
    <child :msg="message"></child>
  </p>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

구성 요소를 호출할 때 v-bind를 사용하여 msg 값을 parent.vue에 정의된 변수 message에 바인딩하면 parent.vue의 메시지가 다음과 같이 표시될 수 있습니다. 값은 child.vue로 전달됩니다.

단일 데이터 흐름

상위 구성 요소의 메시지가 변경되면 하위 구성 요소는 자동으로 view를 업데이트합니다. 하지만 하위 구성 요소에서는 소품을 수정하고 싶지 않습니다. 이러한 데이터를 수정해야 하는 경우 다음 방법을 사용할 수 있습니다.

방법 1: prop을 로컬 변수에 할당한 다음 수정이 필요한 경우 prop

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

방법 2: 계산에 영향을 주지 않고 로컬 변수를 수정합니다. 속성 내 props 처리

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

2. 하위 구성 요소는 주로 실습을 통해 상위 구성 요소에 데이터를 전달합니다. 하위 구성 요소 부분: 하위 구성 요소의

<template>
  <p class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </p>
</template>

HTML 입력이 변경되면 사용자 이름이 parent.vue로 전달됩니다.

먼저 sendUser 메소드를 선언하고 Change

event

를 사용하여 sendUser를 호출하세요.

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

sendUser에서 $emit를 사용하여changeName 이벤트를 순회하고 this.name을 반환합니다. 여기서changeName은 릴레이처럼 작동하는 사용자 정의 이벤트이고 this.name은 이 이벤트를 통해 상위 구성 요소에 전달됩니다. 상위 구성 요소 부분:

<template>
  <p class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </p>
</template>

상위 구성 요소에서 getUser 메소드를 선언하고, getUser 메소드를 호출하기 위해 ChangeName 이벤트를 사용하고, 하위 구성 요소에서 전달된 사용자 이름 매개변수를 얻습니다.

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

getUser 메소드의 msg 매개변수가 전달됩니다. 하위 구성요소에서 전달된 매개변수 uesrname.

3. 동일한 수준의 구성 요소 간 데이터 전송

때로는 두 구성 요소도 통신해야 합니다(상위-하위 관계). 물론 Vue2.0은 Vuex를 제공하지만 간단한 시나리오에서는 빈 Vue 인스턴스를 중앙 이벤트 버스로 사용할 수 있습니다.

<template>
  <p id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </p>
</template>

컴포넌트 c1:

<template>
  <p class="c1">
    page
    <button @click="changeMsg">click</button>
  </p>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

컴포넌트 c2:

<template>
  <p class="c2">
    {{msg}}
  </p>
</template>
<script>
var Bus = new Vue();
export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

실제 응용 프로그램에서는 일반적으로 버스가 추출됩니다.

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

컴포넌트 호출 시 참조됩니다('./Bus.js'에서 버스 가져오기)

그러나 이 도입 방법을 사용하면 웹팩으로 패키징한 후 버스의 로컬 범위가 나타날 수 있습니다. 즉, 두 개의 서로 다른 버스를 참조하여 정상적인 통신이 가능합니다.

실제 적용:

버스를 Vue 루트 객체에 삽입

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})

Call

~

이 기사의 사례를 읽으신 후 방법을 익히셨을 것으로 예상됩니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.

this.$root.Bus.$on(),this.$root.Bus.$emit()추천 자료:

Vue는 사용자 정의 아이콘 아이콘을 사용하여 단계별 분석

Vue2x 이미지 미리보기 플러그인 단계별 설명

위 내용은 Vue 구성 요소에 데이터를 전달하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!