您的位置：首页 > Web前端 > Vue.js

Vue组件开发初探

2017-02-14 10:40 585 查看

注册一个组件

有两种方式可以注册一个组件，第一种是全局注册，第二种是局部注册

# 全局注册
Vue.component('my-component',{
template: '<span>Hello</span>'
})
# 局部注册
var child = {
template: '<span>Hello</span>'
}
new Vue({
// ・・・
components:{
my-component: child
}
})

注意：组件的注册必须要在Vue实例创建之前

使用组件

<div id="app">
<my-component></my-component>
</div>

当我们需要使用到data时，data必须是一个函数，否则将会报错，这是Vue的一个规则，如下

Vue.component('my-component',{
template: '<span>{{message}}</span>',
data:function(){
return {message:'hello'}
}
})

组件间消息传递

当我们封装了组件A，但是组件A又嵌套了组件B，这时候组件AB形成了父子组件的关系，我们应该怎么来让父组件传递消息给子组件呢，这里用到了一个属性值props，如下

Vue.component('my-component',{
props: ['message']
template: '<span>{{message}}</span>'
})
# 通过props传递消息给子组件
<my-component message="Hello"></my-component>

上面的例子，我们通过props传递了参数给子组件，确实能改变子组件的值，但是，假如我们有这样一个要求，props的值是动态改变的，那么这种静态字面量传递参数的方式就不能满足我们的需求了。如下将说明如何进行动态的props值设定

<div id="app">
<input v-model="parentMsg"><br>
<my-component v-bind:message="parentMsg">
</div>

这里通过v-bind的命令，将我们的message与parentMsg进行绑定，这样，当我们的parentMsg改变时，message将能实时改变

自定义事件

父子组件之间如果通过props来传递数据的话，那么似乎只能进行单向的数据传递，只能从父组件向子组件传递，假如我们需要从子组件传递消息回去，那么就需要用到自定义事件了

# 使用v-on绑定自定义事件
Vue.component('my-component',{
template: '<button v-on:click="increment">{{counter}}</button>',
data: function(){
return {counter: 0}
},
methods: {
increment: function(){
this.counter += 1;
this.$emit(increment);
}
}
})
new Vue({
el: '#app',
data: {
// ・・・
total:0
},
methods: {
// ・・・
incrementTotal: function(){
this.total += 1;
}
}
})

<div id="app">
// ・・・
<p>{{total}}</p>
<my-component v-on:increment="incrementTotal"></my-component>
</div>

这里，我们点击按钮，按钮的显示的数值将会改变，同时，total的值也会动态的改变，这就是子组件回传数据的实例，我们点击按钮时，将会首先执行button的onclick方法，在onclick方法里面，通过this.$emit('increment')来执行我们自定义的事件，假如我们需要在$emit中添加参数，那么我们就要在$on()中进行回调的处理

我们接下来自定义一个表单输入控件，我们在输入框中输入信息，同时在P标签中显示出来。

这里我们平时使用的

v-model="message"

其实是下面语句的一个简化版本，也就是语法糖

v-bind:value="message" v-on:input="message = arguments[0]"

或者

v-bind:value="message" v-on:input="message = $event.target.value"

那么自定义表单控件我们需要干什么呢？

为了让v-model生效，我们需要在子组件中定义一个value的属性，还有一个监听新值产生的input事件
来看看我们的自定义控件

复制代码代码如下:
<my-input label="Message" :value="message" @input="message = arguments[0]"></my-input>

在上面，我们通过 :value="message" 绑定一个value使其与上一级组件的message相挂钩，后面这个 v-on:input 是子组件定义的事件，事件名可以自己定义，arguments[0] 是组件自定义时传入的第一个参数

完整代码如下:

# 使用自定义事件的表单输入控件
Vue.component('my-input',{
template: '\
<div>\
<label>{{label}} :</label>\
<input v-bind:value="value" v-on:input="onInput"></input>\
</div>\
'
,
props:['value','label'],
methods:{
onInput:function(event){
this.$emit('input',event.target.value);
// this.$emit('input')
}
}
})

<div id="app">
<p>{{message}}</p>
<my-input label="Message" v-model="message"></my-input><br>
<!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> -->
</div>

我们在定义内部事件时，调用到了$emit(),为了让message能动态改变，我们需要将输入的参数回传回去，这样才能使外部组件与我们的表单控件显示一致

Vue组件的就先写到这，接下来还有事件分发，就接下来再写。由于理解的不同，可能有写得不好的，所以有错误的地方请指正。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 组件

相关文章推荐

新的分享

章节导航