建设单位网站设计,如何开发网站平台开发,wordpress面包屑文字大小如何调整,wordpress用户认证插件文章目录 1.组件传递Props校验1.1.默认值1.2.必选项1.3.注意事项#xff1a;props 是只读的 2.组件事件-组件传递数据2.1.温馨提示#xff1a;组件之间传递数据的方案 3.组件事件-配合“v-model”使用 1.组件传递Props校验
Vue组件可以更细致地声明对传入的 props 的校验要求… 文章目录 1.组件传递Props校验1.1.默认值1.2.必选项1.3.注意事项props 是只读的 2.组件事件-组件传递数据2.1.温馨提示组件之间传递数据的方案 3.组件事件-配合“v-model”使用 1.组件传递Props校验
Vue组件可以更细致地声明对传入的 props 的校验要求
以下例子为接收String类型传输number控制台警告接收多种类型
props:{title:{type:[String,Number,Array,Object]}
}1.1.默认值
模拟情况传递数据的时候并没有真实传递templateh3ComponentA/h3ComponentB :titletitle :ageage :namesnames/
/templatescriptimport ComponentB from ./ComponentB.vue;export default{data(){return{title:测试,//age:20,//names:[Tom,Bob]}},components:{ComponentB}
}
/script
________________________________________________________________________________
templateh3ComponentB/h3p{{ title }}/pp{{ age }}/pulli v-for(name,index) of names :keyindex{{ name }}/li/ul
/templatescript
export default{data(){return{}},props:{title:{type:[String,Number,Array,Object]},age:{type:Number,default:0},//数字和字符串可以直接default但是如果是数组和对象必须通过工厂函数返回默认值names:{type:Array,default(){return [xxx]}}}
}
/script1.2.必选项
没有传值就会提示警告1.3.注意事项props 是只读的 2.组件事件-组件传递数据
在组件的模板表达式中可以直接使用$emit方法触发自定义事件
触发自定义事件的目的是组件之间传递数据子传父templateh3组件事件/h3ChildVue someEventgetHandle/p父元素{{ message }}/p
/template
scriptimport ChildVue from ./Child.vue;export default{data(){return {message:}},components:{ChildVue},methods:{getHandle(data){console.log(触发了,data);this.message data;}}
}/script
________________________________________________________________________________
templateh3Child/h3button clickclickEventHandle传递数据/button
/template
scriptexport default{data(){return{msg:Child数据!}},methods:{clickEventHandle(){//自定义事件this.$emit(someEvent,this.msg)}}
}/script2.1.温馨提示组件之间传递数据的方案
1.父传子props (子级不可变更父级传来的数据只读)
2.子传父自定义事件 this.$emit 3.组件事件-配合“v-model”使用
v-model输入的同时获取用户输入的信息
希望实现组件A输入数据组件B实时得到数据templateSearchComponent searchEventgetSearch/h3Main/h3p搜索内容为{{ search }}/p
/template
script
import SearchComponent from ./SearchComponent.vueexport default{data(){return{search:}},components:{SearchComponent},methods:{getSearch(data){this.search data}}
}
/script
________________________________________________________________________________
template搜索input typetext v-model.lazysearch
/template
script
export default{data(){return{search:}},watch:{search(newValue,oldValue){this.$emit(searchEvent,newValue);}}
}
/script
