vue-day4 of front end and mobile development

Pass value from parent component to child component
For the definition method of component instance, note: make sure to use props attribute to define the data passed by the parent component

<script>
    // Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'This is the message in the parent component'
      },
      components: {
        son: {
          template: '<h1>This is a subcomponent --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>
//Use v-bind or simplify instructions to transfer data to subcomponents:

<div id="app">
    <son :finfo="msg"></son>
  </div>

Pass value from child component to parent component
Principle: the parent component passes the reference of the method to the inner part of the child component. The child component internally calls the method passed by the parent component, and at the same time passes the data to the parent component as parameters when calling the method;
The parent component passes the reference of the method to the child component, where getMsg is the method name defined in methods in the parent component, and func is the method name when the child component calls the passed method

<son @func="getMsg"></son>
//The method in the parent component is called internally by this.$emit('method name ', data to be passed), and the data is passed to the parent component for use

<div id="app">
    <!-- Reference parent component -->
    <son @func="getMsg"></son>

    <!-- Component template definition -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="Pass value to parent component" @click="sendMsg" />
      </div>
    </script>
  </div>

  <script>
    // How to define subcomponents
    Vue.component('son', {
      template: '#son ', / / component template Id
      methods: {
        sendMsg() { // Button click event
          this.$emit('func', 'OK'); // Call the method passed by the parent component and pass the data out at the same time
        }
      }
    });

    // Create Vue instance to get ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // In the subcomponent, the method actually called through this.$emit() is defined here
          alert(val);
        }
      }
    });
  </script>
//The case of the difference comment list between data and props in component
//Objective: to mainly practice transferring values between parent and child components
//Use this.$refs to get elements and components

<div id="app">
   <div>
     <input type="button" value="Get element content" @click="getElement" />
     <!-- Use ref Get elements -->
     <h1 ref="myh1">It's a big one H1</h1>

     <hr>
     <!-- Use ref Get subcomponents -->
     <my-com ref="mycom"></my-com>
   </div>
 </div>

 <script>
   Vue.component('my-com', {
     template: '<h5>This is a subcomponent</h5>',
     data() {
       return {
         name: 'Sub components'
       }
     }
   });

   // Create Vue instance to get ViewModel
   var vm = new Vue({
     el: '#app',
     data: {},
     methods: {
       getElement() {
         // Get elements through this.$refs
         console.log(this.$refs.myh1.innerText);
         // Get components through this.$refs
         console.log(this.$refs.mycom.name);
       }
     }
   });
 </script>

Tags: Programming Vue Attribute

Posted on Sat, 07 Dec 2019 05:39:17 -0500 by _spaz