vue.js 组件 component （十三）

快来打我* 2023-02-22 13:47 12阅读 0赞

# 组件：组件是可复用的Vue实例，且带有一个名字。 #

使用 Vue.component函数注册全局组件，第一个参数为组件名。

定义一个组件的示例：

<body>
    <div id="app">
    
    	<button-counter @clicknow="clicknow">
    		<h2>hi...h2</h2>
    	</button-counter>
    	
    	<button-counter ></button-counter>
    </div>
    </body>
    
    <script> //定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function(){ return { count:0 }, template: '<button @click="count++"> You clicked me { { count }}times.</button> } } var vm = new Vue({ el : "#app", data : { }, methods:{ clicknow : function (e) { console.log(e); } } }); </script>

一个组件包含 **属性，数据，模板，方法**。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    	
    <div id="app">
    	<button-counter title="title1 : " @clicknow="clicknow">
    		<h2>hi...h2</h2>
    	</button-counter>
    	<button-counter title="title2 : "></button-counter>
    </div>
    
    <script type="text/javascript"> Vue.component('button-counter', { props: ['title'], //组件属性 data: function () { //组件的数据 return { count: 0 } }, //组件模板内容, 模板内容需要一个根节点包裹起来 template: '<div><h1>hi...</h1><button v-on:click="clickfun">{ {title}} You clicked me { { count }} times.</button><slot></slot></div>', methods:{ //组件方法 clickfun : function () { this.count ++; this.$emit('clicknow', this.count); } } }) var vm = new Vue({ el : "#app", data : { }, methods:{ clicknow : function (e) { console.log(e); } } }); </script>
    <style type="text/css"> </style>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue.js 组件 component （十三）

组件：组件是可复用的Vue实例，且带有一个名字。使用 Vue.component函数注册全局组件，第一个参数为组件名。定义一个组件的示例： <body>

快来打我*/ 2023年02月22日 13:47/ 0 赞/ 13 阅读

相关 vue 组件（component、components）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

分手后的思念是犯贱/ 2022年12月12日 15:07/ 0 赞/ 221 阅读

相关 vue components组件

组件组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。组件是可复用的 Vue 实例。 1.局部注册

约定不等于承诺〃/ 2022年11月29日 12:23/ 0 赞/ 232 阅读

相关 Vuejs组件化开发

组件化开发 01-组件化开发 01-组件化开发的基本使用 02-全局组件和局部组件 03-父组件和子组件 04

Myth丶恋晨/ 2022年10月29日 07:44/ 0 赞/ 262 阅读

相关 Vuejs——（８）Vuejs组件的定义

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。

怼烎@/ 2022年07月18日 01:52/ 0 赞/ 352 阅读

相关 Angular component组件

创建组件: 我是在Node.js的命令行环境下创建的组件，先cd到angular项目的目录下创建组件的命令: ng generate component compon

Love The Way You Lie/ 2022年05月15日 00:43/ 0 赞/ 317 阅读

相关 vuejs组件通信的eventHub(巴士）

eventHub以我理解，他有点像vuex eventHub是什么？但是又是缩小版的，可以说是乞丐版，因为他所操作的东西并不多。但是作为组件之间的通信已经足够了，

迈不过友情╰/ 2022年05月13日 08:34/ 0 赞/ 326 阅读

相关十七、Component 组件props 属性设置

Component 组件props 属性设置所谓组件就是自定义一个标签，设置标签里面的属性。 pro

た入场券/ 2022年05月03日 07:57/ 0 赞/ 440 阅读

相关 vuejs组件通信精髓归纳

组件的分类 1. 常规页面组件，由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理

朴灿烈づ我的快乐病毒、/ 2022年03月08日 15:08/ 0 赞/ 266 阅读

相关 Vuejs基本知识(十四)【component初级知识】

`Component` 组件组件是 Vuejs中最最重要的部分之一. 学号需要一定的时间投入。在 “webpack” 项目中，每一个页面文件( `.vue`) 都可

朴灿烈づ我的快乐病毒、/ 2021年06月26日 16:06/ 0 赞/ 571 阅读