propsData 不是和属性有关,他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识,作一个<header></header>的扩展标签出来。实际我们并非推荐用全局扩展的方式作自定义标签,我们学了组件,完全可以使用组件来做,这里只是为了演示propsData的用法。

  		<header></header>

		var fatherIsWho = Vue.extend({
    			template : `<p>{{question}}结果:{{answer}}</p>`,
    			data: function(){
    				return {
    					question : "你的爹地是谁?"
    				}
    			},
    			props:['answer'] 
    		})
    		new fatherIsWho({propsData:{'answer':'马云'}}).$mount('father')

扩展标签已经做好了,这时我们要在挂载时传递一个数字过去,我们就用到了propsData。

我们用propsData三步解决传值:

1、在全局扩展里加入propsData进行传递。propsData:{'answer':'马云'}

2、传递时用props进行接受。props:[‘answer’]

3、用插值的形式写入模板。{{ answer }}

总结:propsData在实际开发中我们使用的并不多,我们在后边会学到Vuex的应用,他的作用就是在单页应用中保持状态和数据的。
Logo

前往低代码交流专区

更多推荐