VUE2.0 구성 요소의 값 전달 문제

Vue1.0 구성 요소 전송

이벤트를 수신하려면 $on()을 사용하세요.
이벤트를 트리거하려면 $emit()를 사용하세요. 이벤트는 상위 체인 버블링을 따라 전송됩니다.
이벤트를 브로드캐스트하려면 $broadcast()를 사용하고 이벤트는 모든 자손에게 전달됩니다.

Vue2.0, $dispatch(), $broadcast()가 더 이상 사용되지 않습니다. https를 참조하세요. ://cn.vuejs.org /v2/guide/migration.html#dispatch-and-broadcast-replacement

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

Child.vue ㅋㅋㅋ 3. 전달하려면 eventBus.js를 사용하세요. value---형제 구성 요소 간 전달 Value

eventBus.js

<template>
  <p class="child">
    <h1>子组件</h1>
    <button v-on:click="childToParent">想父组件传值</button>
  </p>
</template>
<script>
  export default{
    name: 'child',
    data(){
      return {}
    },
    methods: {
      childToParent(){
        this.$emit("childToParentMsg", "子组件向父组件传值");
      }
    }
  }
</script>parent.vue

App.vue

<template>
  <p class="parent">
    <h1>父组件</h1>
    <Child v-on:childToParentMsg="showChildToParentMsg" ></Child>
  </p>
</template>
<script>
  import Child from './child/Child.vue'
  export default{
      name:"parent",
    data(){
      return {
      }
    },
    methods: {
      showChildToParentMsg:function(data){
        alert("父组件显示信息："+data)
      }
    },
    components: {Child}
  }
</script>

FirstChild.vue

<template>
  <p class="parent">
    <h1>父组件</h1>
    <Child v-bind:parentToChild="parentMsg"></Child>
  </p>
</template>
<script>
  import Child from './child/Child.vue'
  export default{
     name:"parent",
    data(){
      return {
        parentMsg:'父组件向子组件传值'
      }
    },
    components: {Child}
  }
</script>

SecondChild.vue

아아아아

위 내용은 VUE2.0 구성 요소의 값 전달 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!