概述

组件是一个可复用的vue实例
组件通过Vue.component（组件名称, 配置）进行注册
组件的data必须是返回json对象的函数，这样组件复用时每个对象都有各自的属性实例
通过template定义组件的组成内容

简单Demo：

<body><div id="components-demo"><button-counter></button-counter></div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.component('button-counter',{data:function(){return {count: 0}},template:'<button v-on:click="count++">点击了{{count}}次</button>'})new Vue({ el: '#components-demo' })
</script>

效果如下，每点击1次自动加1：

props

HTML页面引用的组件，可以设置各种属性值，vue组件通过 props属性接收数据

<body><div id="components-demo"><!--如下，分别定义了title属性值--><button-counter title="按钮1"></button-counter><button-counter title="按钮2"></button-counter><button-counter title="按钮3"></button-counter></div>
</body>

Vue.component('button-counter',{props: ['title'],  //接收title属性template:'<button>{{title}}</button>'  //使用props定义的属性
})

效果：

props动态传值

上面的demo是通过html写死title传值，实际数据可能是动态的，把上面的例子稍作修改：

<button-counter v-for="buttonText in buttonList" v-bind:title="buttonText">
</button-counter>

new Vue({ el: '#components-demo',data:{buttonList:['按钮1','按钮2','按钮3']}
})

自定义事件

当我们需要在操作自定义组件后，引起组件外的元素变化，就需要用到自定义事件。即：父组件先声明事件，然后子组件操作后触发父组件事件。
需求：仍然以上面的demo为例，增加个文本，显示当前点击的是哪个按钮。

<body><div id="components-demo"><p>点前点击按钮：{{ buttonText }}</p><my-button v-for="button in buttonList"v-bind:title="button"v-on:show-text="buttonText=$event"></my-button></div>
</body>

show-text：自定义事件名
$event：接收子组件外传的参数值，固定就是$event

<script>Vue.component('my-button',{props: ['title'],template: `<button v-on:click="$emit('show-text',title)">{{title}}</button>`})new Vue({ el: '#components-demo',data:{buttonText: '',buttonList:['按钮1','按钮2','按钮3']}})
</script>

$emit：用来触发事件，第一个参数是触发的事件名，第二个参数是需要抛出的数据，父组件通过 $event接收

vue教程4：自定义组件的使用相关推荐

【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...
Vue中关于自定义组件定义@click事件不生效的解决办法
.native修饰符 -- 侦听组件根元素上的原生事件当你给一个vue组件或者是自定义组件绑定事件的时候,要加上native,如果是普通的html元素,就不需要比如:如果使用router-link ...
vue jsx 使用自定义组件
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这时你可以用 render 函数,它比 template ...
Vue 2与Vue 3在自定义组件v-model上的区别
在vue开发中,通常会对一个自定义的组件进行封装,并实现v-model双向绑定功能在 Vue 2 中,通常这样实现父组件 <template><Child v-model=&qu ...
vue系列_自定义组件Modal（模态窗口）
父组件的代码(打开模态窗口的代码): <template> <div class="hello"> <button @click=&quo ...
moel vue 自定义v_vue在自定义组件中使用v-model的方法
vue如何在自定义组件中使用v-model v-model指令所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信我是父亲 ...
使用Vue自定义组件出现的错误
前言在使用Vue的自定义组件的功能时,出现了一个错误 vue.js:634 [Vue warn]: Unknown custom element: <student> - did ...
Vue 自定义组件添加点击(@click)事件
在 Vue 开发中自定义组件之后,需要往组件身上添加 click 之类的一些操作事件,但是加上之后会无效. 原因是因为没有加上 native,官网对于 native 的解释为: .native - 监 ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
vue 自定义组件创建及其使用
vue 自定义组件创建及其使用 1.vue 自定义组件有全局注册和局部注册两种方式: 全局注册通过 Vue.component 来创建组件,这些组件是全局注册的.也就是说它们在注册之后可以用在任何新 ...

vue教程4：自定义组件的使用

概述

props

props动态传值

自定义事件

vue教程4：自定义组件的使用相关推荐

最新文章

热门文章