Vue2.0 parent and child components transfer functions to each other (with code)-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Vue2.0 parent and child components transfer functions to each other (with code)

Apr 17, 2018 pm 01:43 PM

transfer

This time I will bring you the mutual transfer function of Vue2.0 parent and child components (with code). What are the precautions for the mutual transfer function of Vue2.0 parent and child components. The following is a practical case, let's take a look. one time.

What is Vue.js

Vue.js (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue Designed with bottom-up incremental development. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when working with single file components and Vue When combined with ecosystem-supported libraries, Vue is also fully capable of providing drivers for complex single-page applications. Study notes: In vue2.0, when a parent component calls a child component, it wants to pass the function body in the parent component as well.

1. Through props: applicable when parameters need to be passed from child components to parent components

// Parent component.vue

&lt;template&gt;
 &lt;p&gt;
  &lt;ok-input :params=&#39;number&#39; :callback=&#39;callbackNum&#39;&gt;&lt;/ok-input&gt;
 &lt;/p&gt;
&lt;/template&gt;
&lt;script type=&quot;text/ecmascript-6&quot;&gt;
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {},
    callbackNum: function (x) {
     console.log(x);
    }
   };
  },
  methods: {
  },
  components: {
   'ok-input': okInput
  }
 };
&lt;/script&gt;

Copy after login

// Subcomponent.vue

&lt;template&gt;
 &lt;p&gt;
   &lt;input v-model=&#39;numVal&#39; @change=&#39;handleFun&#39;&gt;&lt;/input&gt;
 &lt;/p&gt;
&lt;/template&gt;
&lt;script type=&quot;text/ecmascript-6&quot;&gt;
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleFun(val) {
     this.callback(val); // 将参数传回父组件中的回调函数
   }
  },
  components: {
   'el-input': Input,
  }
 };
&lt;/script&gt;

Copy after login

2. Via $emit: Applicable only when obtaining the current operation object

// 父组件.vue
&lt;template&gt;
 &lt;p&gt;
  &lt;ok-input :params=&#39;inputs&#39; @change=&#39;handleAge&#39;&gt;&lt;/ok-input&gt;
 &lt;/p&gt;
&lt;/template&gt;
&lt;script type=&quot;text/ecmascript-6&quot;&gt;
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {}
   };
  },
  methods: {
   handleAge(evt) {
    console.log(evt.target.value); // 接收从子组件传过来的当前对象
   }
  },
  components: {
   'ok-input': okInput
  }
 };
&lt;/script&gt;

Copy after login

// Subcomponent.vue

&lt;template&gt;
 &lt;p&gt;
   &lt;input v-model=&#39;numVal&#39; @blur=&#39;handleChange&#39;&gt;&lt;/input&gt;
 &lt;/p&gt;
&lt;/template&gt;
&lt;script type=&quot;text/ecmascript-6&quot;&gt;
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleChange(evt) {
    this.$emit('change', evt); // 将当前对象 evt 传递到父组件
   },
  },
  components: {
   'el-input': Input,
  }
 };
&lt;/script&gt;

Copy after login

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!