zoukankan      html  css  js  c++  java
  • vue组件,自定义v-model方法

    <my-component v-model="obj"></my-component>
    

      

    在使用my-component组件时,为了实现双向绑定。

    Vue.component('my-component', {
    	props: {
    		obj: Object,
    	},
    	model: {
    		prop: 'obj',
    		event: 'change'
    	},
    	methods: {
    		onchange: function() {
    			this.$emit('change', this.obj);
    		}
    	}
    });
    

      

    上面代码中

    1.props对象中,需要定义一个能够从外部传入的变量,这里我定义了一个obj。这样就可以用下面这行代码进行传递值

    <my-component :obj="obj对象"></my-component>
    

      

    2.为了能够使用v-model语法糖,我们定义了model对象。model对象包含两个属性,一个是prop,一个是event。prop默认是value,event默认是input,我们这里写model是为了改变默认的东西,使用我们自己定义的变量。写好之后就可以用下面这行代码了。

    <my-component v-model="obj对象"></my-component>
    

      

    3.虽然可以这么用,但还是不能从子组件传递数据到外部。因为change事件并没有被触发。这个change事件是我自定义的,所以这里需要写一个方法onchange。方法名是次要的,主要的是里面的那行代码。

    this.$emit('change', this.obj);
    

      

    这行两个参数,第一个是事件名,和model里的event属性的值要一样。第二个参数是改变的值。写第二个变量,才能改变外部的数据,实现双向绑定的功能。

    文笔不行,没办法表达出清晰的思路,贴上早上翻阅的一些有用的链接,以供参考。

    参考:

    https://jsfiddle.net/yyx990803/58kxs8tj/ 

    https://github.com/vuejs/vue/issues/4373

    http://lizhihua.me/2016/10/31/vue/component_v-model/

  • 相关阅读:
    机器人对话小程序
    partial关键字的含义
    TreeView控件常用写法
    电话本管理程序(实现增删改查功能)
    三层架构
    c# RegistryKey 的相关简单操作
    VS2010程序打包操作(超详细的)
    一些中文.net讲座
    对象表单自动数据邦定
    AspNetForums 2.0中的全文检索
  • 原文地址:https://www.cnblogs.com/saving/p/8037300.html
Copyright © 2011-2022 走看看