Values are passed between components

  • Parent component passes value to child component using props, see: Parent component passes value to child component!
  • A child component passes a value to its parent, consisting of the following three steps:
  1. To customize an event in a child component, usethis.$emit('btn-click', item)Grammar,emitRefers to the launch event,btn-clickIs our custom event name,itemIs data in a child component.Note:: VUE officially recommends you use it all the timekebab-caseFormat event name.
  2. Used in the parent componentv-onListen to our custom array in the child component and define an event for it in the parent component to receive a listen
  3. Receive data in the parent component

As usual, look at the code:

    <div id="app">
      <main-view @btn-click="descclick"></main-view>
      <p>Class ID: {{id}}<br>Name: {{name}}</p>
    </div>
    
    <template id="desc-view">
      <div>
        <button type="button" @click="itemClick(item)" v-for="item in categorylist">{{ item.name }}</button>
      </div>
    </template>
    
    <script type="text/javascript">
      
      Vue.component('main-view', {template:"#desc-view".data:function(){
          return{
            message: 'Hello Vue'.categorylist:[
              {id: 1.name: 'Fresh selection'},
              {id: 2.name: 'Mobile Digital'},
              {id: 3.name: 'Household Appliances'},
              {id: 4.name: 'Computer Office'}}},],methods: {// defined in the child component
          itemClick: function(item){
            // Emit custom events
            this.$emit('btn-click', item)
          }
        }
      });
      
      const app = new Vue({
        el: "#app".data: {id: ' '.name:' '
        },
        methods: {// Receive events in the parent component
          descclick:function(item){
            categorylist = ('descclick', item)
            console.log('descclick', item)
            this.id = categorylist.id
            this.name = categorylist.name
          }
        }
      })
    </script>
Copy the code

Event passing between components:

Event passing between components is mostly done via $emit and $ON, so we need to take a look at how these two apis are used first.

The first is vm.$emit(eventName, [… args]), which is used to emit events on the current instance. The first parameter is the name of the event that was fired, and the second parameter is the parameter passed to the event that was fired.

Then there is vm.$on(event, callback), which is used to create a custom event in the current instance that can be fired by vm.$emit. The first parameter is the event name, and the second parameter is the callback method to execute when the event is raised.

While these two methods are relatively simple to use, let’s take a look at how they can be used to pass events between different components. Again, take the code used for props in the previous chapter:

  • Caution: note that the properties in props are named case-insensitive, so the uppercase properties may not be recognized!
<div id="app">
    <main-view></main-view>
</div>

<template id="main-view">
    <div>
      <button @click="onChangeDescClick('Android')">Android</button>
      <button @click="onChangeDescClick('IOS')">IOS</button>
      <button @click="onChangeDescClick('Vue')">Vue</button>
      <button @click="onDescFontSizeClick()">DescFontSize++</button>

      <desc-view :pushSubDescObj='descObj'></desc-view>
    </div>
</template>

<template id="desc-view">
    <div>
      <h1>{{pushsubdescobj.title}}</h1>
      <p :style="{fontSize: fontSize + 'px'}">{{pushsubdescobj.desc}}</p>
    </div>
</template>

<script>
    Vue.component('desc-view', {
        template: "#desc-view".props: {
            pushsubdescobj: {
                type: Object.default: function () {
                    return { 
                        title: 'This is a default title'.desc: 'This is a default.'}}}},data: function () {
            return {
                fontSize : 12
            }
        },
        created () {
            var $this = this;
            // Receive events. The current instance VM receives custom events
            this.$root.$on('btn-click'.function (size) {
                $this.fontSize += size;
                // The received data
                console.log('btn-click'.1)}); }}); Vue.component('main-view', {
        template: '#main-view'.data: function () {
            return {
                descObj: {
                    title: 'Android'.desc: 'This is the description of Android.'}}},methods: {
            onChangeDescClick: function (type) {
                this.descObj.title = type;
                this.descObj.desc = 'this is' + type + 'Description';
            },
            
            // btn-click custom event name
            onDescFontSizeClick: function () {
                this.$root.$emit('btn-click'.1); }},created(){}});var vm = new Vue({
        el: '#app'
    });
</script>
Copy the code

$root = bTN-click; $root = bTN-click; $root = bTN-click; $root = bTN-click; $root = bTN-click;

$root.$emit(‘btn-click’, 1); $emit(‘btn-click’, 1); To activate the BTN-click event and pass in a parameter matching size 1.

This means that when the DescFontSize++ button is clicked, the size of the

TAB displayed in desc-view increases by one.

Thank you for reading, if you are helpful, welcome to pay attention to “CRMEB” nuggets. Code cloud has our open source mall project, knowledge payment project, JAVA version of the full open source mall system, study and study welcome to use, the old iron easily point a star bai, the boss reward fifty cents, points you twenty-five cents, 😂😂 pay attention to us to keep in touch!