Vue2.0使用props传递数据【data篇】

最新推荐文章于 2025-07-14 00:11:30 发布

原创最新推荐文章于 2025-07-14 00:11:30 发布 · 9.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue2-0 #组件 #props传递数据

vue 专栏收录该内容

40 篇文章

订阅专栏

本文详细探讨了Vue2.0中如何使用props进行父子组件间的数据传递，包括props的基本用法、prop验证以及props与组件实例数据的关系，帮助开发者更好地掌握Vue组件通信的核心技巧。

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

<body>

    <div id = 'app'>
        <div>
            <h3>{{title}}</h3>
            <p>以下为组件内容：</p>
        </div>
        <hr>
        <!--
            注意：
                在js中定义的属性名称如果是"camelCase"规则，
                则在html定义或者绑定value的时候要用"kebab-case"规则,
                仔细区分这3个的内容：my-text，myTest，mytest。
        -->
        <component msg = '这是我自定义的组件' 

                    text = '我的值是text' 

                    my-text = '我的值是my-text' 

                    myTest = '我的值是myTest' 

                    mytest = '我的值是mytest'

                    :component-msg = 'parentMsg'

                    :component-msg2 = 'parentMsg2'

                    commentcomputed = '123+456'

                    :bindcomputed = '123+456'></component>
    </div>

    <template id = 'component'>
        <div>
            <h3>{{component_title}}</h3>
            <p>msg：{{msg}}</p>
            <p>text：{{text}}</p>
            <p>myText：{{myText}}---【原值是“我的值是myTest”，值未变】</p>
            <p>mytest：{{mytest}}---【原值是“我的值是mytest”，值改变】</p>
            <p>componentMsg：{{componentMsg}}</p>
            <p>componentMsg2：{{componentMsg2}}</p>
            <p>普通数字赋值commentcomputed（成为字符串拼接结果）：{{commentcomputed}}</p>
            <p>绑定数字赋值bindcomputed（计算后的属性）：{{bindcomputed}}</p>
        </div>
    </template>

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">

        var COMPONENT = {
            template : "#component",

            // 用props把数据传给子组件
            props : {
                msg : String,
                text : String,
                myText : String,    // 在html定义或者绑定value的时候要用"kebab-case",则在js中用驼峰命名法 
                mytest : String,
                componentMsg : String,
                componentMsg2 : String,
                commentcomputed : Number,
                bindcomputed : Number
            },
            data : function(){
                return {
                    component_title : '组件名',
                    msg : '',
                    text : this.text,
                    // my-text : this.myText,   // 报错：Unexpected token -
                    // myText : this.my-text,   // 报错   
                    myText : this.myText,       // 在html定义或者绑定value的时候要用"kebab-case",则在js中用驼峰命名法 
                    mytest : this.mytest,

                    /**
                     *  如果父组件没定义‘parentMsg’属性，就会报错：parentMsg is not defined 
                     */ 
                    componentMsg : this.componentMsg,  

                    /**
                     *  如果父组件没定义‘parentMsg’属性，就会报错：parentMsg is not defined
                     *  此时原有的值被'parentMsg2'传进来的值覆盖了 
                     */ 
                    componentMsg2 : '我是componentMsg2的值',

                    commentcomputed : this.commentcomputed,
                    bindcomputed : this.bindcomputed

                }
            },
            methods : {

            }
        } ;

        Vue.component('component', COMPONENT) ;

        var _vm = new Vue({
            data : {
                title : 'Vue2.0使用props传递数据【data篇】',
                parentMsg : '这是parentMsg的值',    // 这里如果不定义‘parentMsg’属性，就会报错：parentMsg is not defined
                parentMsg2 : '这是parentMsg2的值'   // 这里如果不定义‘parentMsg2’属性，就会报错：parentMsg2 is not defined
            },
            methods : {

            }
        }).$mount('#app');

    </script>
</body>