本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:
成都创新互联公司是专业的甘泉网站建设公司,甘泉接单;提供成都网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行甘泉网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1. 新建组件:
Vue.component
方法用于注册全局组件, new Vue({ components: {}})
用于注册某个实例内使用的组件,所以
在 #app2 中失效;
;2. 浏览器渲染网页标签的限制:
3. 组件中的 data 数据集:
new Vue({})
中的实例数据集,组件中的 data 数据集必须是一个函数,再使用函数返回一个对象集,否则会报错;4. 实例给组件传值:
5. 组件标签属性使用动态数据:
6. 自定义组件属性的值的规则:
{ // 属性类型: String、Number、Boolean、Function、Object、Array,null-任意类型, // 可以使用数组多选 type: null, // 是否必须被赋值:true、false required: false, // 默认值:可以是一般任意值或有返回值的函数 default: '', // 自定义判断函数:参数 value 为调用时传入的值, // 返回 true、false 来通知 vue 机制是否报错 validator: function(value){ return true } }
7. 组件内给实例发送通知:
this.$emit('child', 11)
告诉实例,该调用 child 事件了,后面的参数会变成 child 的调用参数传递;v-on:child="father"
元素属性,来监听 child 事件收到通知时应该执行什么处理,通过 father 的形参,可以直接访问 child 的调用参数;8. 组件之间通信:
bus.$emit
发送通知,使用 bus.$on
监听通知;9. 组件内容节点的分发:
box1
{{box2Text}}
10. 多个
ppppp
h5
h5
h6
h6
11.
{{props.text}}
scope="props"
属性,而 标签内则是 props 对象的作用域上下文;props.text
访问到 text 属性的值;
使用,而
即可;12. 动态切换组件:
13. 在实例中访问子元素对象:
$refs
中访问到组件的对象;总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对创新互联的支持。