Home >Web Front-end >JS Tutorial >Value passing problem of VUE2.0 components

Value passing problem of VUE2.0 components

一个新手
一个新手Original
2017-09-13 10:24:271472browse

##Transfer between Vue1.0 components

Use $on() to listen for events;

Use $emit() to trigger events on it;
Use $dispatch() to dispatch events, which bubble along the parent chain;
Use $broadcast() to broadcast events, and events are propagated downward to all descendants

After Vue2.0, $dispatch() and $broadcast() are deprecated, see https://cn.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replacement

1. Pass the value from the child component to the parent component:

##Child.vue

<template>
  <p>
    </p>
<h1>子组件</h1>
    <button>想父组件传值</button>
  </template>

<script> export default{ name: &#39;child&#39;, data(){ return {} }, methods: { childToParent(){ this.$emit("childToParentMsg", "子组件向父组件传值"); } } } </script>parent.vue
<template>
  <p>
    </p>
<h1>父组件</h1>
    <child></child>
  
</template>
<script>
  import Child from &#39;./child/Child.vue&#39;
  export default{
      name:"parent",
    data(){
      return {
      }
    },
    methods: {
      showChildToParentMsg:function(data){
        alert("父组件显示信息:"+data)
      }
    },
    components: {Child}
  }
</script>

2. Parent component passes value to child component

parent.vue

<template>
  <p>
    </p>
<h1>父组件</h1>
    <child></child>
  </template>

<script> import Child from &#39;./child/Child.vue&#39; export default{ name:"parent", data(){ return { parentMsg:&#39;父组件向子组件传值&#39; } }, components: {Child} } </script>

child.vue

<template>
  <p>
    </p>
<h1>子组件</h1>
    <span>子组件显示信息:{{parentToChild}}</span><br>
  </template>

<script> export default{ name: &#39;child&#39;, data(){ return {} }, props:["parentToChild"] } </script>

3. Use eventBus.js to pass value ---Brother Value transfer between components

##eventBus.js

import Vue from &#39;Vue&#39;
export default new Vue()

App.vue

<template>
  <p>
    <secondchild></secondchild>
    <firstchild></firstchild>
  </p>
</template>

<script>
import FirstChild from &#39;./components/FirstChild&#39;
import SecondChild from &#39;./components/SecondChild&#39;

export default {
  name: &#39;app&#39;,
  components: {
    FirstChild,
    SecondChild,
  }
}
</script>

FirstChild.vue

<template>
  <p>
    <input>
    <button>向组件传值</button>
    <br>
    <span>{{message}}</span>
  </p>
</template>
<script>
  import bus from &#39;../assets/eventBus&#39;;
  export default{
    name: &#39;firstChild&#39;,
    data () {
      return {
        message: &#39;你好&#39;
      }
    },
    methods: {
      showMessage () {
       alert(this.message)        bus.$emit(&#39;userDefinedEvent&#39;, this.message);//传值
      }
    }
  }
</script>

SecondChild.vue

<template>
    <p>
        </p>
<h1>{{message}}</h1>
    </template>

<script> import bus from &#39;../assets/eventBus&#39;; export default{ name:&#39;SecondChild&#39;, data(){ return { message: &#39;&#39; } }, mounted(){ var self = this; bus.$on(&#39;userDefinedEvent&#39;,function(message){ self.message = message;//接值 }); } }</script>

The above is the detailed content of Value passing problem of VUE2.0 components. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn