用了几个月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
经验首页