propsData Option 全局扩展的数据传递

简介: propsData Option 全局扩展的数据传递

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


代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>PropsData Option Demo</title>
</head>
<body>
    <h1>PropsData Option Demo</h1>
    <hr>
    <header></header>
    <script type="text/javascript">
       var  header_a = Vue.extend({
           template:`<p>{{message}}</p>`,
           data:function(){
               return {
                   message:'Hello,I am Header'
               }
           }
       }); 
       new header_a().$mount('header');
    </script>
</body>
</html>


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


1.在全局扩展里加入props进行接收。props:[‘a’]


2.传递时用propsData进行传递。propsData:{a:1}


3.用插值的形式写入模板。{{ a }}


完整代码:

var  header_a = Vue.extend({
    template:`<p>{{message}}-{{a}}</p>`,
    data:function(){
        return {
            message:'Hello,I am Header'
        }
    },
    props:['a']
}); 
new header_a({propsData:{a:1}}).$mount('header');


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

目录
相关文章
|
2月前
|
存储 JSON JavaScript
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
详细介绍了微信小程序中组件的创建、引用(包括局部引用和全局引用)、样式隔离、组件的data、methods和properties,以及组件的数据监听器的使用方法和场景。
组件的创建,引用,样式隔离以及methods,data,properties和数据事件监听
|
4月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
281 1
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
44 0
|
6月前
element plus 表各组件怎样和分页组件配合使用
element plus 表各组件怎样和分页组件配合使用
103 0
|
JavaScript Shell
eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题
eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题
45 0
|
JavaScript
解决uniapp分段器参数改变不渲染,适用所有组件
解决uniapp分段器参数改变不渲染,适用所有组件
608 0
|
JavaScript 前端开发
vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)
vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)
275 0
|
JavaScript
Vue——08生命周期、绑定加冒号与不加的区别、总线机制、$bus事件总线、以及$emit与$on之间的关系
生命周期、绑定加冒号与不加的区别、总线机制、$bus事件总线、以及$emit与$on之间的关系
97 0
|
JavaScript 开发工具 git
手写实现el-form系列组件的核心逻辑 -- 练习组件通信
手写实现el-form系列组件的核心逻辑 -- 练习组件通信
196 0