二十、propsData Option 全局扩展的数据传递

原创于 2018-10-28 12:04:12 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#propsData

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文通过一个具体的实例，展示了如何在Vue.js中使用propsData选项来传递初始prop值，这对于组件的动态初始化非常有用。文章详细解释了如何定义和使用props，并通过一个header组件的示例代码，演示了propsData的正确用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

propsData Option 全局扩展的数据传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>propsData 实例</title>
    <!--引入Vue.js-->
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>propsData 实例</h1>
    <hr>
    <header></header>


    <script type="text/javascript">
        var  header_a = Vue.extend({
            template:`<p>{{message}}-{{a}}</p>`,
            data:function(){
                return {
                    message:'Hello,I am Header'
                }
            },
            props:['a']//定义一个变量a
        });
        //为a这个变量传一个值1
        new header_a({propsData:{a:1}}).$mount('header');
    </script>


</body>
</html>