本文主要给大家介绍了关于vue.js之UI组件开发的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：
1. 新建组件：
<script src="/public/javascripts/vue.js"></script>
<style>
#app1{background-color: red}
#app2{background-color: blue}
</style>
<body>
<div id="app1">
<box-one></box-one>
<box-two></box-two>
<boxThree></boxThree>
</div>
<div id="app2">
<box-one></box-one>
<box-two></box-two>
</div>
<box-one></box-one>
<box-two></box-two>
<script>
Vue.component('box-one', {
template: '<div class="box-one">box-one</div>'
});
var app1 = new Vue({
el: '#app1',
components: {
'box-two': {
template: '<div class="box-two">box-two</div>'
},
'boxThree': {
template: '<div class="boxThree">boxThree</div>'
}
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
Vue.component 方法用于注册全局组件， new Vue({ components: {}}) 用于注册某个实例内使用的组件，所以 <box-two></box-two> 在 #app2 中失效；
由于浏览器渲染标签时会把标签全部转成小写，驼峰式组件名称会失效，如事例中的 <boxThree></boxThree> ；
在实例以外无法使用任何组件；2. 浏览器渲染网页标签的限制：
<script src="/public/javascripts/vue.js"></script>
<style>
.red{background-color: red}
.blue{background-color: blue}
</style>
<body>
<div id="app1">
<table class="red">
<box-one></box-one>
</table>
<select class="red">
<box-two></box-two>
</select>
<table class="blue">
<tr is="box-one"></tr>
</table>
<select class="blue">
<option is="box-two"></option>
</select>
</div>
<script>
Vue.component('box-one', {
template: '<tr><td>box-one</td></tr>'
});
Vue.component('box-two', {
template: '<option>option</option>'
});
var app1 = new Vue({
el: '#app1'
});
</script>
3. 组件中的 data 数据集：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<done-button></done-button>
</div>
<script>
Vue.component('done-button', {
template: '<button>{{text}}</button>',
data: function (){
return {
text: 'ok'
}
}
});
var app1 = new Vue({
el: '#app1'
});
</script>
new Vue({}) 中的实例数据集，组件中的 data 数据集必须是一个函数，再使用函数返回一个对象集，否则会报错；4. 实例给组件传值：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<done-button text="submit" textOne="submit1" text-two="submit2"></done-button>
</div>
<script>
Vue.component('done-button', {
template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>',
props: ['text', 'textOne', 'textTwo']
});
var app1 = new Vue({
el: '#app1'
});
</script>
5. 组件标签属性使用动态数据：
<script src="/public/javascripts/vue.js"></script>
<style>
.appNumber{background-color: red}
</style>
<body>
<div id="app1">
<done-button :number="appNumber"></done-button>
<button class="appNumber" @click="appNumber++">{{appNumber}}</button>
</div>
<script>
Vue.component('done-button', {
template: '<button @click="number++">{{number}}</button>',
props: ['number']
});
new Vue({
el: '#app1',
data: {
appNumber: 0
}
});
</script>
6. 自定义组件属性的值的规则：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<done-button number1="a" number2="1" :number3="1" ></done-button>
</div>
<script>
Vue.component('done-button', {
template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>',
props: {
number1: {
type: Number
},
number2: {
type: Number
},
number3: {
type: Number
}
}
});
new Vue({
el: '#app1'
});
</script>
{
// 属性类型： 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="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<done-button v-on:child="father" ></done-button>
</div>
<script>
Vue.component('done-button', {
template: '<button v-on:click="add()">增加</button>',
methods: {
add: function () {
this.$emit('child', 11);
}
}
});
new Vue({
el: '#app1',
methods: {
father: function(number) {
console.log('father' + number);
}
}
});
</script>
this.$emit('child', 11) 告诉实例，该调用 child 事件了，后面的参数会变成 child 的调用参数传递；
实例在初始化组件时，定义 v-on:child="father" 元素属性，来监听 child 事件收到通知时应该执行什么处理，通过 father 的形参，可以直接访问 child 的调用参数；8. 组件之间通信：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<done-button ></done-button>
<cancel-button></cancel-button>
</div>
<script>
var bus = new Vue();
Vue.component('done-button', {
template: '<button v-on:click="send()">发送</button>',
methods: {
send: function () {
bus.$emit('done-emit', 11);
}
}
});
Vue.component('cancel-button', {
template: '<p>{{text}}</p>',
data: function (){
return {
text: '00'
}
},
mounted: function() {
var _this = this;
bus.$on('done-emit', function(number) {
_this.text = number;
});
}
});
new Vue({
el: '#app1',
methods: {
call: function(value) {
console.log('father:' + value);
}
}
});
</script>
bus.$emit 发送通知，使用 bus.$on 监听通知；9. 组件内容节点的分发：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<box></box>
<box>
<h4>box1</h4>
</box>
<box>{{box2Text}}</box>
</div>
<script>
Vue.component('box', {
template: '<p><slot>默认</slot></p>'
});
new Vue({
el: '#app1',
data: {
box2Text: 'box2'
}
});
</script>
10. 多个 <slot> 标签之间的使用：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<box>
<p>ppppp</p>
<p slot="h4">h4</p>
<h4 slot="h4">h4</h4>
<p slot="h5">h5</p>
<h5 slot="h5">h5</h5>
</box>
</div>
</div>
<script>
Vue.component('box', {
template: [
'<div id="box">',
'<div class="default">',
'<slot></slot>',
'</div>',
'<div class="h4">',
'<slot name="h4"></slot>',
'</div>',
'<div class="h5">',
'<slot name="h5"></slot>',,
'</div>',
'</div>',
].join('')
});
new Vue({
el: '#app1'
});
</script>
11. <slot> 标签回传数据给内容节点：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<box >
<template scope="props">
<span>{{props.text}}</span>
</template>
</box>
</div>
</div>
<script>
Vue.component('box', {
template: '<div id="box"><slot v-for="i in items" :text="i"></slot></div>',
data: function (){
return {
items: [0,1,2,3,4]
}
}
});
new Vue({
el: '#app1'
});
</script>
scope="props" 属性，而 <template> 标签内则是 props 对象的作用域上下文；
props 内自动含有 <slot> 标签中的属性，例如事例中的 text 属性，则可直接使用 props.text 访问到 text 属性的值；
当然，也可以结合 <slot name="header"> 使用，而 <template slot="header"> 即可；
<template> 标签为 vue 保留的标签，实际只是个占位符；12. 动态切换组件：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<component :is="view"></component>
<button @click="view = 'inlinebox'">change</button>
</div>
</div>
<script>
Vue.component('box', {
template: '<div id="box">box</div>',
});
Vue.component('inlinebox', {
template: '<div id="inlinebox">inlinebox</div>'
});
new Vue({
el: '#app1',
data: {
view: 'box'
}
});
</script>
13. 在实例中访问子元素对象：
<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
<box ref="box1"></box>
</div>
</div>
<script>
Vue.component('box', {
template: '<div id="box">box</div>',
});
new Vue({
el: '#app1',
mounted: function() {
console.log(this.$refs);
}
});
</script>
$refs 中访问到组件的对象；
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对的支持。
