首页 > 编程 > JavaScript > 正文

Vue组件内部实现一个双向数据绑定的实例代码

2019-11-19 11:53:47
字体:
来源:转载
供稿:网友

思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:

import Vue from 'vue'const component = {  props: ['value'],   template: `    <div>      <input type="text" @input="handleInput" :value="value">    </div>  `,   data () {     return{}   },   methods: {    handleInput (e) {      this.$emit('input', e.target.value)    }  }}new Vue({  components: {    CompOne: component   },   el: '#root',   template: `    <div>     <comp-one :value1="value" @input="value = arguments[0]"></comp-one>    </div>   `, data () {  return{    value: '123'  } }})

总结

以上所述是小编给大家介绍的Vue组件内部实现一个双向数据绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表