当前位置: 首页 > Web前端 > vue.js

P12,vue3组件基本使用

时间:2023-03-31 17:33:10 vue.js

组件基础//定义一个新的组件,命名为button-counterVue.component('button-counter',{data:function(){return{count:0}},template:'Youclickedme{{count}}times.'})组件是可重用的Vue实例,具有名称:在本例中为。我们可以将此组件用作由newVue创建的Vue根实例中的自定义元素:

newVue({el:'#components-demo'})因为组件是可重用的Vue实例,所以它们接收与新Vue相同的选项,例如数据、计算、监视、方法和生命周期挂钩。唯一的例外是特定于根实例的选项,如el。组件重用你可以重用组件任意次数:/button-counter>
请注意,单击按钮时,每个组件将独立维护自己的计数。因为每次使用组件时,都会创建它的一个新实例。datamustbeafunction当我们定义这个组件的时候,你可能会发现它的data并没有直接提供这样一个对象:data:{count:0}而是组件的dataoption必须是一个函数,所以每个实例都可以维护一个返回对象的独立副本:data:function(){return{count:0}}如果Vue没有这个规则,点击一个按钮可能看起来像下面的代码影响所有其他实例:component测试实例App.vueContent.vueHello_kugou.vue