데이터 전송을 위해 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()추천 도서:

WebPack을 사용하여 vue 다중 페이지를 구성하는 방법

Node.js 샌드박스 환경을 사용하는 방법

위 내용은 데이터 전송을 위해 Vue 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!