v-mode的基本使用，自定义组件传参

Posted 2023-03-15 炽橙子

1.使用v-model可以实现双向数据绑定
输入框默认和p标签为空，当输入框输入内容时，p标签在页面上会自动出现输入框输入的内容，
其中v-model可以结合lazy使用，写成v-model.lazy
这样写可以在用户按回车或者失去焦点时，p标签才会被赋予上值

 

2.v-model.number可以让输入框只能输入数字，如果输入其他类型的值，则输入框会自动清除

3.v-model.trim去除首尾空格，使用trim可以去除输入框的首尾空格，但不能去除中间的空格

 

// 子组件
<template>
    <el-select :value="selectVal" placeholder="请选择"  @change="change">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </template>
  
  <script>
    export default 
      model:
        prop: \'selectVal\',
        event: \'change\'
      ,
      props:
        selectVal: 
          type: String,
          default: () => \'\'
        ,
      ,
      data() 
        return 
          options: [
            value: \'选项1\',
            label: \'黄金糕\'
          , 
            value: \'选项2\',
            label: \'双皮奶\'
          , 
            value: \'选项3\',
            label: \'蚵仔煎\'
          ]
        
      ,
      methods:
        // 更新
        change (selectVal) 
          this.$emit(\'change\',selectVal)
        ,
      
    
  </script>

//父组件

<template>
    <div id="app">
      <selectdemo v-model=\'Val\'></selectdemo>
      <el-button @click=\'getClick\'>测试</el-button>
    </div>
  </template>
   
  <script>
  import selectdemo from \'./components/selectdemo\'
  export default 
    data()
      return
        Val:\'选项2\',
      
    ,
    name: \'App\',
    components:Car,selectdemo,selectdemo2,
    created()
    ,
    methods:
        getClick()
　　　　　　　　//父组件获取到子组件改变的值
            console.log(\'值\',this.Val)
        ,
    
  
  </script>

 

//父组件
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--<router-view/>-->
    <car v-model="index"></car>
    <div>index</div>
  </div>
</template>
 
<script>
import Car  from "./car.vue"
export default 
  data()
    return
      index:0
    
  ,
  name: \'App\',
  components:Car

</script>

//子组件
<template>
  <div @click="$emit(\'input\',value+1)">汽车</div>
</template>
<script>
  export default
    props:["value"]
  
</script>

父组件通过v-model绑定index到子组件上，而通过v-model绑定的数据在子组件中默认的key是value，所以在props上用value取值，最后通过点击事件执行$emit,而$emit上触发的事件是input，前面我们说过v-model绑定的事件是input，从而在子组件上触发了父组件的input事件，而在触发事件的时候可以传值，所以就实现了父子组件数据双向绑定，如果用的是v-bind，还需要自己去定义事情，所以使用v-model可以减少代码量。

转：https://blog.csdn.net/u010320804/article/details/79486034