Vue工程化开发通过V-model 基本实现 跨组件变量绑定

Vue工程化开发通过V-model 基本实现 跨组件数据绑定

众所周知在vue工程化开发的模式下面可以增加项目的开发进度;也快速的提高了我们对新型开发模式和尖端开发技术的要求; 但是对于刚入门或者刚接触Vue工程化开发模式(我们称之为脚手架)会存在对于组件之间的相互传送数据非常迷茫;小编在刚接触的时候也是一脸迷茫;但是随着接触和认识越来越多你慢慢的会发现这里面到的逻辑其实非常简单的;下面我们进入正题来说一下脚手架里面怎么通过V-model这个这个VUE内置指令 来实现跨组件绑定内容

1.了解V-model的原理

V-model是Vue内置的指令,我们可以通过来实现V变量和表单内容的双向绑定;也就是说用来实现数据的双向绑定(MVVM)即数据层和视图层的双向绑定;从而可以快速的操作内容数据 也就实现了Vue从不直接操作DOM的说法

2.V-model的深层次拆分

V-model 之所以在脚手架里面实现数据双向绑定 是应为Vue内置 给我们绑定了value和input事件,人家直接封装好的,所以我们可以直接拿过来使用;
在表单里面value可以直接收集数据内容 然而input事件可以通过触发把收集到的内容赋值给V变量 ;
v-model
value === Vue变量 -> 视图

@input事件 === Vue变量 <- 视图;
代码实现:

  <div>
    <input type="text" :value="msg" @input="fn">
  </div>
<script>
// 目标: 用vue自己实现v-model的功能
// v-model功能: 双向数据绑定
// 表单标签value 和 vue的变量 双向绑定
// view层 -  model层  (MVVM设计模式), 互相关联
// 页面改变 -> 变量
// 页面改变 <- 变量
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    fn (e) {
      this.msg = e.target.value // 视图里的最新value值赋予给msg变量 (View -> Model)
    }
  }
}

3.通过V-mode特性和辅助组件来实现跨组件的变量绑定

废话少说直接代码演示;
目标: 父子组件之间, 变量的"双向绑定"
父组件的代码:

  <div>
    <p>父组件: {{ num }}</p>
    <!-- <Child :value="num" @input="fn"></Child> -->
    <Child v-model="num"></Child>
  </div>
<script>
// 目标: 父子组件之间, 变量的"双向绑定"
import Child from './Child'
export default {
  data () {
    return {
      num: 10
    }
  },
  methods: {
    fn (a) {
      this.num = a
    }
  },
    components: {
    Child
  },
}
</script>

子组件代码:

<template>
  <div>
      <p>子组件 {{ value }}</p>
      <button @click="addFn">+</button>
  </div>
</template>

<script>
// "value属性"-必须这个名字
// 传出去值, 必须用"input事件"
export default {
  props: {
    value: Number
  },
  methods: {
    addFn () {
      const a = this.value + 1
      this.$emit('input', a)
    }
  }
}
</script>

4.总结;

结合上述,加上代码的分析相信大家基本也可以实现跨组件的数据绑定了;
小编创作水平有限;如有不足请大家私信我…小编初入博客多多指教…
<不喜勿喷>