Vue基础 之 米和千米的相互转换 watch监听方法 |
您所在的位置：网站首页 › 千米和公里之间的换算单位 › Vue基础 之 米和千米的相互转换 watch监听方法 |
|
米和千米的互换watch监听
{numberkm}} -->
{dnumberkm}} -->
千米：km {numberm}} --> {dnumberm}} -->米：m //父组件 var app = new Vue({ el:'#app', data:{ num1km: 1, num2m: 1000, }, methods:{ number1change(val){ this.num2 = parseFloat(val); }, number2change(val){ this.num1 = parseFloat(val); } }, //子组件 components:{ cpn:{ template:'#cpn', data(){ return{ dnumberkm: this.numberkm, dnumberm: this.numberm, } }, props:{ numberkm: { default:1, }, numberm: { default:1000, } }, watch:{ dnumberkm(newValue){ this.dnumberm = newValue * 1000; this.$emit('num1change', newValue); }, dnumberm(newValue){ this.dnumberkm = newValue /1000; this.$emit('num2change', newValue); }, }, }, }, })使用watch 监听 从父组件prop接收的、在子组件上被双向绑定的 data 。 将 watch 监听的（已改变的新的）数据通过自定义事件$emit（发射）给父组件。 父组件 @ 到自定义事件的发生，执行相应函数，从而改变父组件中的初始data。 父组件的初始 data 通过 prop 将值传给子组件。 表现为：子组件的千米发生变化，watch 到变化后（input输入新的值）的千米，将千米X1000后，发射给父组件，父组件监听该发射，接收千米X1000后的数据，并将该数据赋值给父组件的原始的存放米的data， 由于父组件的 米 发生了改变，prop 使 子组件的 米 也发生了改变。——子组件的千米发生改变，最后子组件的米也发生了改变。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |