How to pass values ​​between vue components

This time I will bring you the value transfer method between vue components, what are the notes for value transfer between vue components, the following is a practical case, Let’s take a look.

For us on the front end, writing the interface is not the biggest problem. In many cases, what we need to focus on is data, such as data transfer on js pages, etc. We also need to learn vue Know how to use data

Of course, it is possible to use storage, but caching is not necessary. Of course, it is recommended in Vue that we use vuex for data interaction. Vuex will make your Vue code flexible and controllable, and store the data uniformly in the state. Mutations modifications are only allowed to be triggered through Actions. However, sometimes our projects are not complex enough to require Vuex. , (We will not discuss the abolished vm.$dispatch) In many cases we need to capture an event. At this time we can use vue's eventbus

The method to use eventbus is very simple. We need to do three steps. The first step is to create a container to act as our eventbus

In the second step, we need to throw, or submit our event

The third step is to monitor our event (maybe this is the second part)

First, we need to define our eventbus

globally Here we define eventbus. This simply completes our first step. Of course, global variables, I think you should know where they are defined

Then we first throw this event and use ￥. emit to "submit"

Anyway, this is understandable. Next, we go through the third step to monitor

certainly. Already monitored here. The click event is just a burden,

Next we have to use them in the interface

First, pour the files we need:

Here I am using two files: transimissionone and transimissiontwo ‘

Next is the definition

The second is to use

Finally run our project and check the effect

This is mainly for everyone to use, so the code is captured below, mainly four files

transitone. vue (file that sends events)

<template> 
  <p class="transimission1"> 
  <button @click="get">点击发送数值到eventbus中</button>  
  </p> 
   
</template> 
 
<script> 
  export default { 
    name: "transimission1", 
    methods: { 
      get: function() { 
        console.log("Aaa"); 
        eventBus.$emit('eventBusName', "hellokugou"); 
      } 
    }, 
  } 
</script> 
<style> 
</style>

Followed by transittwo (listener)

<template> 
  <p class="transimissiontwo"> 
    <button @click="method1">点击console.log出eventbus的信息 
</button> 
  </p> 
</template> 
 
<script> 
  export default { 
    name: "transimissiontwo", 
    methods: { 
      method1: function() { 
        //使用on老监听事件 
        eventBus.$on('eventBusName', function(val) {  
          console.log("这个是用transimissiontwo的val值为："+val) 
        }) 
      } 
    } 
  } 
</script> 
<style> 
 
</style>

Next comes our hub. app. Use

<template> 
  <p id="app"> 
    <click></click> 
  <transimissiontwo></transimissiontwo> 
    <transimissionone></transimissionone> 
  <sendparent @listenertochildevent="getmessagefromchild"></sendparent> 
    <value :locallogo="netlogo"></value> 
    <!--无法监听，说明要在那个组件中--> 
    <button @listenertochildevent="getmessagefromchild">测试能否监听</button> 
    <my_plug_in></my_plug_in> 
    <p class="choose_p"> 
      <ul> 
        <li> 
          <router-link to="/foo">foo页面</router-link> 
        </li> 
        <li> 
          <router-link to="/header">header页面</router-link> 
        </li> 
        <li> 
          <router-link to="/hello">hello页面</router-link> 
        </li> 
        <li style="clear: both;list-style: none;"></li> 
      </ul> 
    </p> 
    <p class="main"> 
      <router-view class="my_router_iew"></router-view> 
    </p> 
    <testmintui></testmintui> 
  </p> 
</template> 
 
<script> 
  import value from './components/value' 
  import click from "./components/click" 
  import my_plug_in from "./components/plug_in" 
  import sendparent from "./components/send_parent" 
  import testmintui from "./components/Test_mint-ui" 
  import transimissiontwo from "./components/transimissiontwo" 
  import transimissionone from "./components/transimissionone" 
  export default { 
    name: 'app', 
    data() { 
      return { 
        netlogo: "主页显示信息到组件中" 
      } 
    }, 
    components: { 
      value, 
      click, 
      my_plug_in, 
      sendparent, 
      testmintui, 
      transimissionone, 
    transimissiontwo, 
     
    }, 
    methods: { 
      getmessagefromchild: function(data) { 
        console.log(data); 
      } 
    } 
  } 
</script> 
<style> 
  body { 
    background-color: #f8f8ff; 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    color: #2c3e50; 
  } 
  ul { 
    width: 12rem; 
  } 
  ul li { 
    list-style: none; 
  } 
  ul li:not(:last-child) { 
    list-style: none; 
    width: 2rem; 
    margin-left: 0.1rem; 
    margin-right: 0.1rem; 
    float: left; 
    text-align: center; 
    background: #2C3E50; 
    color: white; 
  }    
  ul li a { 
    text-decoration: none; 
    font-size: 16px; 
    color: white; 
    line-height: 1rem; 
    text-align: center; 
  } 
  ul li:nth-child { 
    list-style: none; 
    clear: both; 
  } 
  .choose_p { 
    width: 100%; 
    overflow: scroll; 
  } 
</style>

in vue Please ignore the useless code. The next step is to define eventbus

window.eventBus = new Vue();

That's it, it's very simple

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular4 to achieve 3d effect

AngularJS to implement the select secondary linkage drop-down menu step-by-step explanation

The above is the detailed content of How to pass values ​​between vue components. For more information, please follow other related articles on the PHP Chinese website!