Vue组件开发初探

网友投稿 219 2023-06-14


Vue组件开发初探

注册一个组件

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

# 全局注册

vue.component('my-component',{

template: 'Hello'

})

# 局部注册

var child = {

template: 'Hello'

}

new Vue({

//

components:{

my-component: child

}

})

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

使用组件

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

Vue.component('my-component',{

template: '{{message}}',

data:function(){

return {message:'hello'}

}

})

组件间消息传递

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

Vue.component('my-component',{

props: ['message']

template: '{{message}}'

})

# 通过props传递消息给子组件

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

<br>

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

自定义事件

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

# 使用v-on绑定自定义事件

Vue.component('my-component',{

template: '',

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;

}

}

})

//

{{total}}

这里,我们点击按钮,按钮的显示的数值将会改变,同时,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事件

来看看我们的自定义控件

复制代码 代码如下:

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

完整代码如下:

# 使用自定义事件的表单输入控件

Vue.component('my-input',{

template: '\

\

\

'

,

props:['value','label'],

methods:{

onInput:function(event){

this.$emit('input',event.target.value);

// this.$emit('input')

}

}

})

{{message}}


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

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Bootstrap中data
下一篇:出现java.util.ConcurrentModificationException 问题及解决办法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~