Vue2.0使用props传递数据---6

最新推荐文章于 2024-07-24 17:30:38 发布

宇智波幽助

最新推荐文章于 2024-07-24 17:30:38 发布

阅读量397

点赞数

分类专栏： vue 文章标签： vue2-0 组件 props传递数据

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<body>

    <div id = 'app'>
        <div>
            <h3>正常的数据</h3>
            <p>
                Prop验证
            </p>


            <div>
                <p>name:{{dr.name}}</p>
                <p>age:{{dr.age}}</p>
            </div>
        </div>

        <hr>

        <div>
            <h3>组件的数据</h3>

            <div>
                <p><input v-model="telphone" /></p>
            </div>

            <div>
                <div>component组件（默认）：</div>

                <child :child-msg = 'name' my-text = '测试看看'
                        :msg_null="123+456" 
                        msg_string="this is string" 
                        :msg_number="99" 
                        :msg_twoway.sync="telphone" 
                        :msg_validate="mobilephone" 
                        :msg_number2String="mobilephone" 
                        :msg_obj2json="dr" 
                        :msg_json2obj="drJson">         
                </child>

            </div>


        </div>  

    </div>


    <template id = 'child'> 
        <div>
            <p>msg_1：{{msg_1}}</p>
            <p>childMsg：{{childMsg}}</p>
            <p>myText：{{myText}}</p>
            <p>show_text：{{show_text}}</p>
            <hr>
            <div>msg_null：{{msg_null}}</div>
            <div>msg_string：{{msg_string}}</div>
            <div>msg_number：{{msg_number}}</div>
            <div>msg_obj：{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div>
            <div>msg_twoway：<input v-model="msg_twoway"></div>
            <div>msg_validate：{{msg_validate}}</div>
            <div>msg_number2String：{{msg_number2string}}</div>
            <div>msg_obj2json：{{msg_obj2json}}</div>
            <div>msg_json2obj：{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>
        </div>
    </template>

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

        Vue.component('child', {

            template : '#child',

            props: {

                childMsg : String,
                myText : String,


                //基础类型检测("null"意思是任何类型都可以)
                msg_null: null,

                //String类型，必须是定义过的，可以是空字符串""
                msg_string: {
                    type: String,
                    required: true,
                },

                //Number类型，默认值100
                msg_number: {
                    type: Number,
                    default: 100,
                },

                //Object类型，返回值必须是js对象
                msg_obj: {
                    type: Object,
                    default: function() {
                        return {
                            name: "DarkRanger",
                            age: "18",
                        }
                    }
                },

                //指定这个prop为双向绑定
                //如果绑定类型不对将抛出一条警告
                msg_twoway: {
                    type: String,
                    twoWay: true,
                },

                //自定义验证，必须是Number类型，验证规则：大于0
                msg_validate: {
                    type: Number,
                    validator: function(val) {
                        return val > 0;
                    }
                },

                //将值转为String类型
                //在设置值之前转换值(1.0.12+)
                msg_number2string: {
                    coerce: function(val) {
                        return val + ""
                    }
                },

                //js对象转JSON字符串
                msg_obj2json: {
                    coerce: function(obj) {
                        return JSON.stringify(obj);
                    }
                },

                //JSON转js对象
                msg_json2obj: {
                    coerce: function(val) {
                        return JSON.parse(val);
                    }
                }
            },

            data : function () {
                return {
                    msg_1 : '这是子组件自己的数据',
                    childMsg : '这是子组件自己的数据',    // 这个数据会被父组件传过来的数据覆盖
                    show_text : this.myText
                }
            }
        }) ;


        var _vm = new Vue({
            data : {
                name : '风君子',
                telphone: "0356-1234567",
                mobilephone: 15912345678,
                dr: {
                    name: "DarkRanger",
                    age: 25
                },
                drJson: '{"name":"DarkRanger","age":25}',
            },
            methods : {}
        }).$mount('#app');

    </script>


    <!--

    解释说明：

    1、msg_null：不论什么数据类型，只要能解析成功，就渲染成正确的html。

    2、msg_string：只能传递String类型的字符串，如果将child中的“msg_string="this is string"”更改为“:msg_string="1+2"”,控制台报错。

    3、msg_number：如果在child06标签中没有定义值，我们将会取默认值100，现在定义了“:msg_number="99"”，如果将“:msg_number="99"”更改为“msg_number="99"”，控制台报错。

    4、msg_obj：在js中我们定义的msg_obj的default属性是一个具有返回js对象的函数，这里取值的时候直接取的就是返回值，如果在child06中定义或者绑定了新的js对象，则会将msg_obj更新为新的数据。取js对象属性值的时候用{{Object.prop}}取值即可。

    5、msg_twoway：双向数据绑定，在测试的过程中发现，即使设置“twoWay: true”，当子组件发生变化时，vue实例的数据并不会更新，还是单向的数据绑定，这里我将child中原先的“:msg_twoway="telphone"”更改为“:msg_twoway.sync="telphone"”，保证测试能够数据双向绑定。

    6、msg_validate：有验证规则的组件数据，这里定义的规则是当前数值必须大于0，如果将child06中的“:msg_validate="mobilephone"”更改为“:msg_validate="-1"”。控制台报错。

    7、msg_number2string：在结果赋值之前将数值转化为字符串。

    8、msg_obj2json：vue.js内置了JSON的两个方法，一个是JSON.parse(jsonStr)==》将JSON字符串转化为js对象，另外一个是JSON.stringify(obj)==》将js对象序列化为JSON字符串。这里是将obj转化为json字符串，需要添加coerce属性，它是一个具有返回json字符串的函数，当然不是必须得用JSON.stringify(obj)方法，只要方法合理，能够转化为json能够识别的字符串即可。

    9、msg_json2obj: 将json字符串转化为js对象。

    -->

</body>

原文链接：http://blog.csdn.net/qq_24122593/article/details/53019354

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0使用props传递数据---6

<body> <div id = 'app'> <div> <h3>正常的数据</h3> <p> Prop验证 </p> <div> <p>name:{{dr.name}}</p> <p>
复制链接

扫一扫

专栏目录