zoukankan      html  css  js  c++  java
  • vue中的v-model 与 .sync

    <input v-model="parentData">
    //等同于
    <input 
        :value="parentData"
        @input="parentData = $event.target.value"
    >

    demo

    <div id="app">
        <runoob-input v-model="num"></runoob-input>
        <p>输入的数字为:{{num}}</p>
    </div>
    <script>
    Vue.component('runoob-input', {
        template: `
        <p>   <!-- 包含了名为 input 的事件 -->
          <input
           ref="input"
           :value="value" 
           @input="$emit('input', $event.target.value)"
          >
        </p>
        `,
        props: ['value'], // 名为 value 的 prop
    })
       
    new Vue({
        el: '#app',
        data: {
            num: 100,
        }
    })
    </script>
    一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突
    Vue.component('base-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean
      },
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })

    而.sync修饰符类似于v-model

    <comp :foo.sync="bar"></comp>
    //等同于
    <comp :foo="bar" @update:foo="val => bar = val"></comp>

    调用:this.$emit('update:foo', newValue)

      

    demo

    <template>
        <div class="details">
            <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
            <button @click="changeValue">toggle</button>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    Vue.component('myComponent', {
          template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
          props:['show'],
          methods: {
            closeDiv() {
              this.$emit('update:show', false); //触发 input 事件,并传入新值
            }
          }
    })
    export default{
        data(){
            return{
                valueChild:true,
            }
        },
        methods:{
            changeValue(){
                this.valueChild = !this.valueChild
            }
        }
    }
    </script>
     
  • 相关阅读:
    Nbear实体和接口 CodeSmith模版
    prototype1.4版中文参考手册(word,pdf,chm)
    SharePoint 2013 (SharePoint 15)的新特性
    没有域环境下安装SharePoint 2010
    产品经理(PM)常用原型图设计工具
    【转贴】mysql导入数据load data infile用法
    重新学javaweb!
    关于HIbernate中的lazy属性的一些解释
    JAVA程序员基本测试题目
    添加sql server约束
  • 原文地址:https://www.cnblogs.com/hy96/p/13964160.html
Copyright © 2011-2022 走看看