先来看一个简单的实例:
html
<div id="component">
<my-component></my-component>
</div>
js
创建模板
var MyComponent = Vue.extend({
template: '<div>A good idea!</div>'
});
//注册一下 就是申明 绑定一下
Vue.component('my-component',MyComponent);
//创建实例 就是绑定到父级 div#component
new Vue({
el: '#component'
});
接着看 内部注册一个模板: 内部模板只能使用在父级的模板内(即:template 的字符串中) 下面代码 ****** 标注
html
<div id="ex000">
<my-component msg="hello"></my-component>
</div>
js
//局部注册
var show = Vue.extend({
template: '<div>sssssssssssssssssssssssssssssssssss</div>'
});
//全局注册
//定义
var showss = Vue.extend({
//模板
template: '<div>{{ msg }} {{ privateMsg }} <show-s></show-s></div>', // ******
//参数
//props: {
// msg: ''
//},
props: ['msg'],
//数据
data: function () {
return {
privateMsg: '2222222222222'
}
},
//内部的模板 使用components 进行扩展及调用
components: {
//连接内部模板 调用局部模板:show
'show-s': show
}
});
//注册
Vue.component('my-component', showss);
//创建实例
var ex000 = new Vue({
el: '#ex000'
});
效果:
再来看看 父级与子级间的通讯
html
<div id="demo-2">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
js
var child = Vue.extend({
props: ['myMessage'],
template: '<span>{{myMessage}}</span>'
});
new Vue({
el: '#demo-2',
data: {
parentMsg: 'Message from parent'
},
components: {
//不带引号('child')则是注册的是子级 可以在页面直接使用 带引号则是内部注册 只能在内部的template中使用
child: child
}
});
//components还可以这么写
components: {
child: {
props: { // or props: ['myMessage']
'myMessage': ''
}
template: '<span>{{ myMessage }}</span>'
}
}
效果:
自定义 :
html
<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
// <child v-on:child-msg="handleIt"></child>
</div>
js
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg); // 触发child-msg事件
this.msg = '';
}
}
}
});
// 启动父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在创建实例时 `events` 选项简单地调用 `$on`
events: {
'child-msg': function (msg) { // 监听到 child-msg事件
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg); // messages改变自动修改html内容
}
}
});
效果:
- 大小: 2.5 KB
- 大小: 8.3 KB
- 大小: 18.3 KB
分享到:
相关推荐
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常 容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时, Vue.js 也能完美地驱动复杂的单页应用
网页模板——基于vue.js框架制作图片上传组件特效源码
另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视...
基于vue开发的宠物商店购物系统源码+项目说明(课程大作业).zip 从零构建vue + vue-router + vuex,实现基本的系统功能 【技术栈】 vue + element + axios + node.js + mysql ...|——— vue.config.js #配置
网页模板——基于vue.js实现树状菜单组件代码
前端插件vue.js下载 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并...Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。
(这篇小总结主要总结了veu中组件、父组件和子组件之间的传值、兄弟组件数据交互、插槽的用法) 1.组件 定义: 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代 1.1组件的基本...
本文介绍vue.js组件,具体如下: 5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据。另外,在子组件中修改...
本篇文章主要介绍了Vue.js组件,组件系统是Vue.js其中一个重要的概念,具有一定的参考价值,有需要的可以了解一下。
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用,请参考Demo 源码
另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视...
基于vue的宠物商店购物系统从零构建vue + vue-router + vuex,实现基本的系统功能技术栈vue +元素+ axios + node.js + mysql项目地址客户:505 123456项目结构 |——— public |——— src|——— api #封装axios...
Vue.js框架入门之表单和组件基础 Vue.js框架入门之组件创建、注册、使用 现在来续写第六期——Vue Router路由管理器 一、什么是路由 1、后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应...
1.基于vue3与elementUI开发的社区疫情管理系统: 压缩包内包含: ✪.Vue3疫情后台管理系统.pptx, ✪.接口文档.txt, ✪.项目启动文档.txt, ✪.项目文件.zip 2.功能模块: 社区管理系统主要负责收集阳性人员所接触的密...
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景——分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程;与...
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。 摘要: 1、该组件基于...
在VueJS中,v-for循环是每个项目都会使用的东西...首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性,它可以确保组件以您期望的方式工作。 果我们不