爱站网是什么,泰安网签房查询,长春 网站 设计公司,企业运营模式vue前端开发自学练习,Props数据传递-类型校验,默认值的设置#xff01;
实际上#xff0c;vue开发框架的时候#xff0c;充分考虑到了前端开发人员可能会遇到的各种各样的情况#xff0c;比如大家经常遇到的#xff0c;数据类型的校验#xff0c;再比如#xff0c;默认… vue前端开发自学练习,Props数据传递-类型校验,默认值的设置
实际上vue开发框架的时候充分考虑到了前端开发人员可能会遇到的各种各样的情况比如大家经常遇到的数据类型的校验再比如默认值的设定等等。下面给大家展示一下源码。和实际的效果。 templateh3CompontA/h3CompontB :titletitle /
/template
script
import CompontB from ./CompontB.vue;export default{data(){return{title:新闻标题}},components:{CompontB}}/script 如图以上是CompontA.vue的源码内容里面有一个动态数据title,如果父组件传递给了子组件那么就可以在子组件内正常显示出来这个信息了。如果不传递子组件里自定义的默认值就会生效了。
如图这是成功拿到了父组件传递的信息 下面是父组件不穿值的情况下显示了子组件自己定义的一个默认值的情况。
templateh3CompontB/h3p{{ title }}/phrulli v-for(item,index) of names :keyindex{{ item }}/li/ul
/template
script
import Child from ./Child.vueexport default{data(){return {}},props:{title:{type:String,default:默认新闻标题文本},names:{type:Array,default(){return [数组默认内容,默认数组内容2]}}}}
/script
如图以上代码是CompontB.vue子组件的代码内容里面可以看到我们设置了一些类型的校验和默认值的信息。如果父组件不传递的情况就会显示我们的默认值。
如图这是默认值的信息 显示出来了。 下面介绍一下其他的类型默认值的定义情况比如数组对象都需要借助于函数的形式来定义默认值。【数字字符串可以直接定义默认值】。 templateh3CompontA/h3CompontB :namesnames/
/template
script
import CompontB from ./CompontB.vue;export default{data(){return{title:新闻标题,names:[admin,guest]}},components:{CompontB}}/script 以上代码在父组件内定义了数组类型的数据想传递给子组件。
如图子组件确实拿到了传递过来的信息。 如图如果父不传递的时候子组件会显示自己定义好的默认内容。
欢迎大家交流VUE知识点。
