Two-way binding between parent component and child component in Vue2

This time I will bring you the two-way binding between the parent component and the child component in Vue2. What are the two-way binding between the parent component and the child component in Vue2? What are the precautions?, the following are Let’s take a look at practical cases.

Recently I am studying how to write a set of UI components based on Vue2. (parent component) data achieves two-way binding. I thought about using Vuex, but after observing other excellent UI frameworks, I found that using Vuex would cause trouble to other users, so I decided to find a solution. After referring to several articles After many articles, I finally found it.

I post the solution here, hoping to help colleagues like me who are coming into contact with the Vue framework for the first time.

The code logic of the child component

<template> 
 <p class="ne-ipt"> 
  <input type="text" v-model="currentValue"> 
 </p> 
</template> 
 
<style lang="less" scoped> 
 @import "../../assets/styles/form/form.less"; 
</style> 
<script> 
 export default { 
  name: 'NeIpt', 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return '' 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit('input', val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

The code logic of the parent component

<template> 
 <p id="button-index"> 
  <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> 
 </p> 
</template> 
<style> 
</style> 
<script> 
 import NeIpt from './NeIpt' 
 export default { 
  name: 'form-index', 
  data () { 
   return { 
    test: '' 
   } 
  }, 
  components: { 
   NeIpt 
  } 
 } 
</script>

When modifying the currentValue of the child component, actually Trigger the input event through $emit and pass the value to the caller's v-model to achieve two-way binding.

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:

The use of v-for index index in html

vue packaged font and image resources How to deal with failure

The above is the detailed content of Two-way binding between parent component and child component in Vue2. For more information, please follow other related articles on the PHP Chinese website!