vue向组件传递数据

问题背景：

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

简化common-form代码是：

var CommonForm = Vue.extend({
    data: function() {
        model: {
            title: ''　　
        }
    }
});

在新开发的页面使用

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