首页 > > 网页制作 > Javascript >

自定义组件v-model的实质性理解

2018-10-08 01:31:16来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

用了几个月Vue一直很纠结自定义组件的v-model实现，最近开始学习React时，React中受控组件与状态提升的理念与v-model不谋而合。

 转载请注明地址: https://www.cnblogs.com/sonoda-umi/p/9750188.html

在Vue与React中其实都存在单向数据流的概念，只不过Vue中通过各种语法糖被弱化了，比如React与Vue中的props都是单向传输数据的。在React中如果想实现类似于v-model的功能，需要这样实现：

父组件：

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />

        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />

        <BoilingVerdict
          celsius={parseFloat(celsius)} />

      </div>
    );
  }
}

子组件：

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

这是一个输入水温从而监控水是否沸腾的一个小组件。子组件是一个温度输入的input控件，父组件是由两个温度输入（华氏与摄氏）与一个现实水是否沸腾的指示器组成。父组件存在一个state作为唯一数据源用于存放温度等值于状态，温度通过子组件的prop传入子组件内部通过input的value属性显示在基础输入框中，当在基础输入框中触发输入时间时，onChange事件触发由prop传入的onTempreture事件并附带变化后的值，再由父组件的handleCelsiusChange/handleFahrenheitChange事件处理方法将基础输入框传来的值写入state中，再由state通过prop将温度传入子组件完成一次数据的更新。这其中其实已经完成了对Vue中基础组件v-model的理解与自定义组件v-model的理解。

转载请注明地址: https://www.cnblogs.com/sonoda-umi/p/9750188.html

在Vue官方文档中，对原生组件v-model的解释是这样的：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

v-model其实是上面写法的语法糖。其实就是将this.searchText的值通过名为value的prop传入input组件内，而后当input事件触发时将事件带来的input的新值写入this.searchText中，然后根据this.searchText中值的变化通过value的prop传入input控件完成input控件上值的变化，如果去掉v-on...后，这个控件将变为一个只读控件。

对于自定义组件，文档中有这样的解释：

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：


Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})
现在在这个组件上使用 v-model 的时候：
<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

其实就是将原来v-model默认使用的名为value的prop与名为input的event自定义一个名字使用，在上面自定义组件中存在

props: {
    checked: Boolean
  }

说明checked本质上还是一个prop，然后在子组件的model属性中将自定义的prop与event注册，而触发model中event时也就是通过触发子组件的事件在父组件中修改绑定自定义prop的变量的值的过程，这样这个过程就很明显了：

1.父组件创建一个名为tmp变量绑定名为checked的prop的值（已被修饰为v-model）并根据父组件中tmp值的变化将变化后的值传入子组件中，引起子组件checkbox状态变化；

2.子组件中checkbox被勾选，触发checkbox的change事件，通过this.$emit方法触发子组件的change事件并将change事件产生的新值传入；

3.因为在model属性中已将v-model语法糖中event注册为change（换成其他名字也都可以），v-model会自动将子组件传来的值传入tmp变量中；

4.Vue监听到tmp值的变化，执行第一步，更新子组件中checkbox的状态；

 

其实上面的子组件可以换个写法更容易理解：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'test'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('test', $event.target.checked)"
    >
  `
})

父组件中调用时可以这样写：

<base-checkbox :checked="something" @test="something='子组件中的$event.target.value'"></base-checkbox>

这样对v-model的理解也就一目了然了。

转载请注明地址: https://www.cnblogs.com/sonoda-umi/p/9750188.html

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：函数内部属性之arguments和this

下一篇：关于redux

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签