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

来源：互联网发布：php上传文件源码编辑：程序博客网时间：2024/06/06 12:52
<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