propsData Option 全局扩展的数据传递 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>propsData Option  全局扩展的数据传递</title>
        <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-touch-fullscreen">
     <meta content="telephone=no,email=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <script src="../assets/js/flexible_css.js"></script>
    <script src="../assets/js/flexible.js"></script>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <header></header>
</div>
    
</body>
<script type="text/javascript">
    var header_a=Vue.extend({      //构造器的延伸
        template:`<p>{{message}}-{{a}}</p>`,
        data:function(){
            return{
                message:" 我是message的值"
            }
        },
        props:['a']
    });
    new header_a({propsData:{a:'propsData的传值'}}).$mount('header');  //   挂载到header标签上  //mount, 意思为挂载。可以理解为将vue实例(逻辑应用),挂靠在某个dom元素(载体)上的一个过程。 

//propsData 不是和属性有关，他用在全局扩展时进行传递数据。
//1、在全局扩展里加入props进行接收。propsData:{a:1}
//2、传递时用propsData进行传递。props:[‘a’]
//3、用插值的形式写入模板。{{ a }}

    var app=new Vue({
        el:'#app',
        data:{            
        }
    })
</script>

</html>

 

posted @ 2018-02-28 12:59  Jinsuo  阅读(121)  评论(0)    收藏  举报