zoukankan      html  css  js  c++  java
  • vue向组件传递数据

    问题背景:

    我封装了一个通用组件 common-form 组件,在新开发的页面中需要使用这个组件。

    简化common-form代码是:

    1 var CommonForm = Vue.extend({
    2     data: function() {
    3         model: {
    4             title: ''  
    5         }
    6     }
    7 });

    在新开发的页面使用

    Vue.extend({
    
    	template: templatem
    	data: function() {
    		return {
    			model: {
    				title: 'what happend'
    			}
    		}
    	},
    })
    

      

    模板

    var template = '<my-form :model="model"></my-form>';
    

     

    注册组件

    Vue.comopent('my-form', myForm)
    

     

    my-form组件

    var myForm = CommonForm.extend({
    	props: {
    		model: {}
    	}
    })
    

      

    全部代码

    var CommonForm = Vue.extend({
    	data: function() {
    		model: {
    			title: ''  
    		}
    	}
    });
    
    var myForm = CommonForm.extend({
    	props: {
    		model: {}
    	}
    })
    
    var template = '<my-form :model="model"></my-form>';
    
    Vue.extend({
    
    	template: templatem
    	data: function() {
    		return {
    			model: {
    				title: 'what happend'
    			}
    		}
    	},
    })
    
    Vue.comopent('my-form', myForm);
    

      

    在my-form组件中,props和data中model不能重复出现,否则vue会提示错误

    参考资料:https://github.com/vuejs/vue/issues/2114

    参考资料:https://jsfiddle.net/digitaldreams/z74v31k6/

    参考资料:https://stackoverflow.com/questions/42087441/the-data-property-article-is-already-declared-as-a-prop-use-prop-default-valu

  • 相关阅读:
    Zabbix-Agent客户端安装
    Zabbix添加监控主机
    Zabbix3.x-Server服务端安装
    hdu-1702-栈和队列
    交换瓶子--蓝桥杯
    四平方和-蓝桥杯
    剪邮票--蓝桥杯--dfs--思路超清晰
    方格填数--蓝桥杯---dfs
    快速排序-quicksort
    日志统计--蓝桥杯--vector
  • 原文地址:https://www.cnblogs.com/saving/p/7518961.html
Copyright © 2011-2022 走看看