Vue Brother 구성 요소에서 값을 전달하는 5가지 방법은 무엇입니까?

5가지 방법은 다음과 같습니다. 1. 상위 구성 요소는 값을 하위 구성 요소에 전달합니다. 2. 하위 구성 요소는 값을 상위 구성 요소에 전달합니다. 3. 상위 구성 요소의 레이블에 사용자 정의 이벤트를 정의하고 매개변수를 얻습니다. 4. 하위 구성요소에서 사용자 정의 이벤트를 트리거하고 매개변수를 전달합니다. 5. 공개 구성요소 Bus.js를 통해 매개변수를 전달합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue 구성 요소에서 값을 전달하는 5가지 방법:

1. 상위 구성 요소에서 하위 구성 요소로 값 전달:

상위 데이터를 하위 구성 요소에 바인딩하고 하위 구성 요소는 props를 통해 매개 변수를 받아들입니다.

다음으로, 상위 구성 요소가 하위 구성 요소에 값을 전달하는 방법을 설명하는 예를 사용하겠습니다. 하위 구성 요소의 상위 구성 요소 App.vue에서 데이터를 얻는 방법 Users.vue users:["Henry"," Bucky","Emily" ]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

2. 하위 구성 요소는 값을 상위 구성 요소에 전달합니다.

상위 구성 요소 "data(){ id: value}"

다음으로 전송할 데이터를 설정합니다. 예를 사용하여 하위 구성 요소가 상위 구성 요소에 값을 전달하는 방법을 설명합니다. "Vue.js Demo"를 클릭하면 하위 구성 요소가 상위 구성 요소에 값을 전달하고 텍스트가 원래 " 값이 전달됩니다."에서 "자식이 상위 구성요소에 값을 전달합니다."로 구성요소 값을 전달합니다.

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: &#39;app-header&#39;,
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3. 상위 구성 요소의 라벨에 맞춤 이벤트를 정의하고 이벤트 내부에서 매개변수를 가져옵니다.

4. 하위 구성 요소에서 맞춤 이벤트를 트리거하고 매개변수를 전달합니다. (this.$emit('상위 구성 요소의 사용자 정의 이벤트', 매개 변수))

5. 공용 구성 요소인 Bus.js를 통해 매개 변수를 전달합니다

[관련 권장 사항: "vue.js tutorial"]

위 내용은 Vue Brother 구성 요소에서 값을 전달하는 5가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!