网络编程 发布日期:2024/9/30 浏览次数:1
本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:
1. 新建组件:
<script src="/UploadFiles/2021-04-02/vue.js">
Vue.component
方法用于注册全局组件, new Vue({ components: {}})
用于注册某个实例内使用的组件,所以 <box-two></box-two>
在 #app2 中失效;<boxThree></boxThree>
;2. 浏览器渲染网页标签的限制:
<script src="/UploadFiles/2021-04-02/vue.js">
3. 组件中的 data 数据集:
<script src="/UploadFiles/2021-04-02/vue.js">
new Vue({})
中的实例数据集,组件中的 data 数据集必须是一个函数,再使用函数返回一个对象集,否则会报错;4. 实例给组件传值:
<script src="/UploadFiles/2021-04-02/vue.js">
5. 组件标签属性使用动态数据:
<script src="/UploadFiles/2021-04-02/vue.js">
6. 自定义组件属性的值的规则:
<script src="/UploadFiles/2021-04-02/vue.js">
{ // 属性类型: String、Number、Boolean、Function、Object、Array,null-任意类型, // 可以使用数组多选 type: null, // 是否必须被赋值:true、false required: false, // 默认值:可以是一般任意值或有返回值的函数 default: '', // 自定义判断函数:参数 value 为调用时传入的值, // 返回 true、false 来通知 vue 机制是否报错 validator: function(value){ return true } }
7. 组件内给实例发送通知:
<script src="/UploadFiles/2021-04-02/vue.js">
this.$emit('child', 11)
告诉实例,该调用 child 事件了,后面的参数会变成 child 的调用参数传递;v-on:child="father"
元素属性,来监听 child 事件收到通知时应该执行什么处理,通过 father 的形参,可以直接访问 child 的调用参数;8. 组件之间通信:
<script src="/UploadFiles/2021-04-02/vue.js">
bus.$emit
发送通知,使用 bus.$on
监听通知;9. 组件内容节点的分发:
<script src="/UploadFiles/2021-04-02/vue.js">
10. 多个 <slot> 标签之间的使用:
<script src="/UploadFiles/2021-04-02/vue.js">
11. <slot> 标签回传数据给内容节点:
<script src="/UploadFiles/2021-04-02/vue.js">
scope="props"
属性,而 <template> 标签内则是 props 对象的作用域上下文;props.text
访问到 text 属性的值; <slot name="header">
使用,而 <template slot="header">
即可;12. 动态切换组件:
<script src="/UploadFiles/2021-04-02/vue.js">
13. 在实例中访问子元素对象: