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的应用,他的作用就是在单页应用中保持状态和数据的。

目录
相关文章
|
15天前
|
JavaScript
vue中router页面之间参数传递,params失效,建议使用query
vue中router页面之间参数传递,params失效,建议使用query
9 0
|
23天前
|
JavaScript
Vue全局事件任意组件间通信
Vue全局事件任意组件间通信
11 0
|
2月前
|
存储 JavaScript
如果需要在组件之间共享一个`ref`,应该如何实现?
如果需要在组件之间共享一个`ref`,应该如何实现?
14 0
|
8月前
|
前端开发
直接用ref控制子组件弹框的开启
直接用ref控制子组件弹框的开启
27 0
|
5月前
|
JavaScript 前端开发 开发者
vue 语法--表单取值,组件通信
vue 语法--表单取值,组件通信
37 0
|
5月前
vuex 2 个模块之间修改数据
vuex 2 个模块之间修改数据
32 0
|
9月前
|
存储 JavaScript
如何使用 ref 属性获取子组件实例对象?
如何使用 ref 属性获取子组件实例对象?
76 0
|
10月前
|
前端开发
【React工作记录七十一】直接用ref控制子组件弹框的开启
【React工作记录七十一】直接用ref控制子组件弹框的开启
84 0
|
JavaScript
Vue——08生命周期、绑定加冒号与不加的区别、总线机制、$bus事件总线、以及$emit与$on之间的关系
生命周期、绑定加冒号与不加的区别、总线机制、$bus事件总线、以及$emit与$on之间的关系
69 0
|
JavaScript 前端开发
vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)
vue的组件化的理解之单独拆分的组件&组件的封装(以el-table组件的二次封装举例)
211 0