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

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可以减少代码量。

还有种方式父组件v-model传的是一个数组时，在子组件里不用this.$emit('change',[9999]) 这种方式也可以在父组件中取到改变的值。直接在数组中push数据this.checked.push(888)

//子组件
<template>
  <div>
    <div @click="click">汽车</div>
  </div>
    
  </template>
  <script>
    export default{
      model:{
        prop: 'checked',
        event: 'change'
      },
      props:["checked"],
      methods:{
        click(){
          // this.$emit('change',[9999])
          this.checked.push(888)
        }
      }
    }
  </script>

//父组件
<template>
    <div id="app">

      <car v-model="index"></car>
      <div>{{index[0]}}</div>
　　　 <div>{{index[1]}}</div>
    </div>
  </template>
   
  <script>
  import Car  from "./components/car.vue"
  export default {
    data(){
      return{
        index:[11],
      }
    },
    components:{Car},
    methods:{
        getClick(){
            console.log('小车的值',this.index)
        },
    }
  }
  </script>

 

 

 

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