vue-语法糖v-model(组件封装)

1.v-model原理

其实v-model是父子组件传值的简写形式；

(1)父子组件传值

• 父组件给子组件传值
  • 父组件 <son 属性名=‘值’></son>
  • 子组件通过props属性进性接收； props:['属性名']
• 子组件给父组件进性传值
  • 子组件： this.$emit(自定义方法名，传递的值）
  • 父组件：@子组件自定义方法名=方法名
    • methods:{方法名(接收值){}}

(2)使用v-model 

其实使用v-model就是简化了父组件的步骤，子组件的步骤是一样的！

作用：可以实现子组件显示的内容就是父组件的值，并且父组件值改变时，子组件显示在页面上的值可以实时改变！

• 父组件传值： v-model=父组件传递的值'
• 子组件接收：props:[‘value’];
  • 属性名一定要是value
• 子组件传值：this.$emit('input',子组件传递的值)
  • 自定义方法名一定要是input;
• 注：父组件的方法一定是将value的值修改为子组件传递过来的值；
  • 因为在子组件不能修改父组件传递过来的值的引用，所以要交给父组件去自己修改!
• 举例说明：子组件有一个按钮，点击按钮将显示的值变为一个随机数
• 父组件

• <template>
    <div class="fa">
      <son v-model="value"></son>
    </div>
  </template>
  
  <script>
  import son from './son'
  export default {
    data: function () {
      return {
        value: 'chaochao'
      }
    },
    components: {
      son
    }
  }
  </script>
  

   

• 子组件

• <template>
    <div class="son">
      <button @click="toEdit">点击修改值</button>
      <div>{{ value }}</div>
    </div>
  </template>
  
  <script>
  export default {
    props: ['value'],
    methods: {
      toEdit () {
        this.$emit('input', Math.random()*100)
      }
    }
  }
  </script>

   

2.使用v-model封装文件上传组件