v-model原理

原理：v-model本质上是一个语法糖。就是value和input事件的合写

作用：提供数据的双向绑定

数据变，视图跟着变：value
视图变，数据跟着变：@input

注意$event用于模板中，获取事件的形参

<template>
 <div id="app">
    <input v-model="msg" type="text">
    <input :value="msg" @input="msg=$event.target.value" type="text">

 </div>
</template>

表单类组件封装&v-model 简化代码

表单类封装

父传子：数据应该是父组件props传递过来的，v-model 拆解绑定数据
子传父：监听输入，子传父传值给父组件修改

例 APP

<template>
  <div class="app">
    <BaseSelect
    :cityId="selectId"
    @changeId="select=$event 
  >
    //$event可以直接拿到点的值即e.target.value
    <template>
      
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
data(){
  return{
    selectId:'102'

  }
},
components:{
  BaseSelect
}
}
</script>

<style>

</style>

<template>
  <div >
    //数据绑定
    <select :value="cityId" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props:{
    cityId:String
  },
  methods:{
    handleChange(e){
      this.$emit('changeId',e.target.value)
    }

  }

}
</script>

<style>

</style>

** 简化代码** 父组件V-model简化代码，实现子组件和父组件数据双向绑定

子组件：Props通过value接受，事件触发input
父组件：v-model给组件直接绑数据

<template>
  <div class="app">
    <BaseSelect
  
    v-model="selectId" 
  >
    //$event可以直接拿到点的值即e.target.value
    <template>
      
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    
    </style></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
data(){
  return{
    selectId:'102'

  }
},
components:{
  BaseSelect
}
}
</script>

<style>

</style>

.sync修饰符

作用可以实现子组件与父组件数据的双向绑定，简化代码

特点prop属性名，可以自定义，非固定为value

场景

本质就是属性名和@updata:属性名合写

<BaseDialog :visible.sync="isShow">

ref和$ref

作用： 利用ref和$refs可以用于获取dom元素，或组件实例

特点查找范围，当前组件内

避免其他组件捣乱，获取当前组件的元素

<div ref="chartRef"></div>

mouted(){
  console.log(this.$refs.chartRef)

进阶语法

v-model原理

表单类组件封装&v-model 简化代码

.sync修饰符

ref和$ref