- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端新视界
Vue.js 系列教程 2：组件，Props，Slots
原文：intro-to-vue-2-components-props-slots 译者：nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分。 组件和传递数据 如果你熟悉 React 或者 Angular2，组件思想和传递状态对你并不陌生。如果不是， 让我们先了解一些主要概念。 This is the app state: {{ count }}</h2>
<child count="1"></child { template: '#comment-template', props: ['commentpost'] }); See the Pen Photo App post with Vue.js id="app"> <h2>We can use slots to populate content</h2> <app-child>
This is slot number
1.8K100发布于 2018-01-17 - 来自专栏ops技术分享
Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) 注册后，我们可以使用以下方式来调用组件： <tagName></tagName> 全局组件 所有实例都能用全局组件。 ' }) // 创建根实例 new Vue({ el: '#app' }) </script> 局部组件 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用： 局部组件实例 : '
自定义组件!
5.1K20发布于 2021-07-27 - 来自专栏pandacode_cn
Web组件库 JS组件方法记录
以折叠面板的形式进行组件描述，点击对应的面板会展示对应信息。 }, { id: '1-2-2', menu_name: '菜单添加', menu_url: 'setting.menu.menu_add ', parent_id: '1-2' }, { id: '2', menu_name: '订单', menu_url menu_url: 'order.orderreview', parent_id: '2' }, { id: '2-2', menu_name id: '2-2-1', menu_name: '退款管理2-1', menu_url: 'order.refundmanagement',
50800编辑于 2023-07-17 Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) tagName 注册后，我们可以使用以下方式来调用组件： <tagName></tagName> 全局组件 所有实例都能用全局组件。 ' }) // 创建根实例 new Vue({ el: '#app' }) </script> 局部组件 我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用： 局部组件实例 : '
自定义组件!
26010编辑于 2025-12-16- 来自专栏河湾欢儿的专栏
Vue.js组件
组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一: 大致可以分成三步 1.在我们引入vue.js 之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建 ------使用Vue这个全局对象的component方法进行全局注册一个组件 2.创建根实例,进行视图的绑定 3.组件的显示 创建根实例 var vm = new Vue({ el: '#app' }) </script> 组件注册的其它方式2 <! -- 自定义的标签只是自定义组件的一个挂载点,自定义组件会将其替换掉 ----直接使用自定义的组件将自定义的标签替换 --> <script> //2. //自定义指令 //Vue.directive('指令名',{}) //定义组件 参数1:组件的名称 参数2: 对象 Vue.component("ab",{
9.7K40发布于 2018-09-06 - 来自专栏女程序员的日常_Lin
Vue.js的组件、组件间通信
目录： 组件的种类：vue-router产生的每个页面、基础组件、业务组件 Vue.js组件的三个API:prop、event、slot Vue.js组件的通信方式： ref：给元素或组件注册引用信息； Vue.js组件的三个API:prop、event、slot props props定义了这个组件有哪些可配置的属性，props最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值 disabled"> <slot></slot> </button> </template> <i-button>按钮 1</i-button> <i-button> 按钮 2< Vue.js组件的通信(基本) Vue内置的通信手段一般有两种 ref：给元素或组件注册引用信息； parent/children：访问父 / 子实例。 Vue.js组件的通信(其他) 一、provide/inject（主要解决子组件获取上级组件的状态，主动提供与依赖注入的关系） Vue.js 2.2.0版本后新增的API。
10.9K10发布于 2020-05-22 - 来自专栏coding
vue.js组件初探
组件的作用 vue.js组件的作用：拆分功能，便于复用。 id="tmp2">
这是一个私有的组件，只能用于特定的vue实例
</template> 将两个组件分别定义为全局组件和局部私有组件 全局组件 Vue.component('test-component', { template: '#tmp1' }); 局部组件 let vm2 = new Vue({ el: "# app2", data: {}, components: { // 定义私有组件 'private-component': { template: "#tmp2" } } }) 具体代码 ?3.3K20发布于 2018-08-02 - 来自专栏马洪彪
免费JS甘特图组件dhtmlxgantt
Nuget nuget install DHTMLX.Gantt npm npm install dhtmlx-gantt 或使用CDN、下载JS库引入（简单HTML应用）。 edge/dhtmlxgantt.css" type="text/css"> <script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.<em>js</em> "></script> js <script type="text/javascript" src="codebase/dhtmlxgantt.<em>js</em>"></script> <link rel="stylesheet 自定义甘特图，可实现自定义展示（通过config和templates），自定义交互（通过method和event）以及自定义<em>组件</em>布局（layout）。 <style> .complete_button{ margin-top: <em>2</em>px; background-image:url("common/v_complete.png
18.9K31发布于 2021-05-19 - 来自专栏ljw
Vue.js组件开发
组件化：视图被分割成可复用的组件，每个组件有自己的状态和生命周期。 指令：Vue.js 提供了一系列内置指令（如 v-bind、v-if、v-for 等），用来处理 DOM 的操作。 状态管理：借助 Vuex，进行组件之间的数据共享和状态管理。 1.2 生态系统 Vue.js 有丰富的生态系统，主要包括： Vue Router：用于 SPA 的路由管理。 -- 在 HTML 中通过 CDN 引入 --> <script src="https://cdn.jsdelivr.net/npm/vue@<em>2</em>/dist/vue.<em>js</em>"></script> 或者使用 //cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body>
{{ message 组件是 Vue.js 的核心概念，组件可以包含自己的模板、数据和方法。
34810编辑于 2025-05-31来自专栏LeoXu的博客Ext JS 教程-组件 原
', { items: [ childPanel1, childPanel2 ] }); 容器使用布局管理器（Layout Manager）去设置它们的子组件的尺寸和位置。 2 shaodow - 定制一个浮动组件的阴影。 3 alignTo() - 使浮动组件同一个特定的元素对其。 4 center() - 让浮动组件在它的容器中对其。 2 beforeShow - 这个方法在组件被显示出来之前被调用。 3 onShow - 允许显示操作有附加的行为。在调用了父类的onShow以后，组件将会是可见的。 它被传入了新的组件，并且也许会被用来改变这个组件，或者用某些方式对容易做一些准备工作。如果返回false，就取消添加操作。 2 onAdd - 这个方法在一个新的子组件已经加入时调用。 2 afterExpand - 这个方法在面板被展开时被调用。 3 onDockedAdd - 这个方法在一个对接条目被加入到面板时被调用。
3.9K30发布于 2018-08-15来自专栏codingvue.js组件切换
vue.js多个组件之间进行切换，可以有多种方式，以下列举几种作为范例： 通过事件进行切换 声明两个组件 <template id="login">
登录组件
</template " @click="flag=true">登录</button> <button class="btn btn-info col-lg-offset-<em>2</em>" @click="flag=false">注册< 组件切换--事件.gif 通过component标签指定当前组件 <component :is="comName"></component> 具体代码 ? 切换组件 组件切换时加上动画效果 使用transition标签将组件包裹起来，实现组件切换时的动画效果 <transition mode="out-in"> <component :is="comName <em>组件</em>切换--动画.gif8.2K20发布于 2018-08-02<script src="<em>js</em>/vue.<em>js</em>"></script> <script> var Bus = new Vue 这是由<app>的父组件决定的 2、<app>组件很可能有它自己的模板 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板，这个过程被称为内容分发 Vue.js实现了一个内容分发 ，并且只有在宿主元素为空，且没有要插入的内容才显示备用内容 <body class="">来自专栏前端之攻略Vue.js-组件 原
1、prop作为初始值传入后，子组件想把它当做局部数据来用 2、prop作为初始值传入，由子组件处理成其它数据输出 对于这2种原因，正确的应对方式是： （1）定义一个局部变量，并用prop的值初始化它 > <c2></c2>
<h2>父组件标题</h2> <（2）具名Slot<h2>我是子组件的标题</h2>这是一些初始内容
这是更多的初始内容
5.7K20发布于 2019-04-04 - 来自专栏姚红专栏
《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件，组件时什么，它的作用，它的构架，以及怎么创建和周期还有常见的配置项，属性方法和事件以及其层级是什么都进行整理，希望对大家有帮助。 ? 组件的基础知识.png ? 2 ?
1.9K20发布于 2019-09-11 - 来自专栏pangguoming
vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。 如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。 首先需要在任意地方添加一个bus.js ? 在bus.js里面 写入下面信息 1 import Vue from 'vue' 2 export default new Vue; ? 在需要通信的组件都引入Bus.js 如果你的bus.js是自定义一个bus的文件那from后面就改成你的所放的位置 1 import Bus from './bus.js' ? 接下来就是要组件通信了 添加一个 触发 #emit的事件按钮 <template>
打开要和$emit通信的另外一个组件 添加 ?1.4K30发布于 2018-03-07来自专栏杨不易呀React-组件-CSS-In-JS
前言React组件CSS-in-JS是一种流行的前端开发技术，它将组件的JavaScript逻辑与样式定义结合在一起，以提高代码的可维护性和可重用性。 通过CSS-in-JS，开发者可以在组件级别轻松管理样式，而不必担心全局污染或类名冲突。 这种方法使用JavaScript对象来描述样式，这些对象可以根据组件的状态或属性进行动态计算，从而实现高度灵活的样式处理。 常见的React CSS-in-JS库包括Styled-components和Emotion。CSS-in-JS还可以提供一些额外的好处，如自动前缀处理和代码拆分，以提高性能。 总之，React组件CSS-in-JS是一个强大的工具，可以帮助开发者更轻松地管理组件样式，从而提高前端开发的效率和可维护性。
93710编辑于 2023-09-30JS： 123456789101112 //创建根实例new Vue({ el: "#example -- 非活动组件将被缓存 --> <component :is="currentView"></component></keep-alive> Vue.js为其组件设计了一个keep-alive 特性，如果这个特性存在，那么在组件被重复创建时，会通过缓存机制快速创建组件，以提升视图更新性能。来自专栏前端全栈开发者Vue.js动态组件解析
什么是动态组件绑定？简单的说，就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 is属性 在挂载点使用component标签，然后使用v-bind:is="组件名"，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可。 -- 组件在 vm.currentView 变化时改变 --> </component>
4.8K40发布于 2019-12-25 - 来自专栏一Li小麦
组件设计基础（2）
决定是否更新）->componentWillUpdate（即将feiqis）->render->componentDidUpdate 2.自身状态变化：通常是state的变化 shouldComponentUpdate 组件通信 props通信 组件通信一般是通过prop来实现的， 接下来实现一个计算器功能，有3个独立的计数器，然后以竖式的形式累加： // ClickCounter.js import React, { •确定每个组件是否依赖于状态？ •找到共同的父级组件(所有需要状态子组件的共同祖先)。 •常见的组件所有者或另一个更高层次结构的组件。 设想一下，在一个应用中，包含三级或者三级以上的组件结构，顶层的祖父级组件想要传递一个数据给最低层的子组件，用prop的方式，就只能通过父组件中转。 组件设计方法论 一些指导性原则： •组件尽可能通过props通信。不用context •组件属性需要有默认值，做好类型检查 •组件属性尽可能使用简单值。避免使用对象。
80250发布于 2019-12-04 - 来自专栏乱码李
ReactJS 学习——组件2
组件列表 使用循环的方式创建组件列表 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>
- { number.toString()}> {number}
); return (- {listItems}
-
{listItems}
-
{listItems}
98510发布于 2021-11-26 - 来自专栏小码农漫漫积累路
js2
setTimeout() 语法： var t=setTimeout("JS语句",毫秒) setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。 语法： setInterval("JS语句",时间间隔) 返回值 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。 (cls) 存在返回true，否则返回false classList.toggle(cls) 存在就删除，否则添加 指定CSS操作 obj.style.backgroundColor="red" JS 方式二：
点我<script> var divEle2 = document.getElementById("d2"); divEle2.onclick= ('b2'); b2Ele.onclick = function (ev) { clearInterval(t); t = undefined }; </script2.8K10发布于 2019-09-26 - 来自专栏繁依Fanyi 的专栏
Vue.js 组件设计详解
在现代Web开发中，组件化设计已经成为构建可维护和可扩展应用程序的关键策略之一。而 Vue.js 作为一个流行的前端框架，以其简单易用、灵活和高效的特点，成为开发者的首选之一。 一、Vue 组件基础 1.1 组件的创建 在 Vue.js 中，组件是一个具有独立功能的可复用代码块。 使用事件总线： 就像在一个办公室里，同事们通过一个公共的公告板（事件总线）来交换信息： // event-bus.js import Vue from 'vue'; export const EventBus /event-bus.js'; export default { methods: { postMessage() { EventBus. /event-bus.js'; export default { data() { return { message: '' }; }, created() {
64810编辑于 2024-09-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号