Vue之子组件
全局组件
<script src="./static/vue.min.js"></script> // 导入vue
<body>
<div id="app"></div>
<script>
Vue.component('global-component', {
template: `
<div>
<h3>{{ wanrong }}</h3>
<h2>{{ wanrong }}</h2>
</div>
`,
data() {
return {
wanrong: 'Hello Wanrong',
}
},
}); new Vue({
el: '#app',
template: `<global-component></global-component>`,
}) </script>
</body>
全局组件不用再根实例中注册，可以直接在div标签中使用。
<body>
<div id="app">
<global-component></global-component>
</div>
<script>
Vue.component('global-component', {
template: `
<div>
<h3>{{ wanrong }}</h3>
<h2>{{ wanrong }}</h2>
</div>
`,
data() {
return {
wanrong: 'Hello Wanrong',
}
},
}); new Vue({
el: '#app',
}) </script>
</body
全局组件的复用：
下图为子组件与父组件之间通信的结构关系图，整体写法结构如下：
组件系统之数据通信
组件系统之混用
方法调用及参数传递
组件系统之插槽
简单点理解就是将模板中的标签替换到注册的标签的位置。注册的标签中的内容替换slot标签（将整个标签替换）。
组件系统之具名插槽
0
Vue之子组件的更多相关文章
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- element-ui（或者说Vue的子组件）绑定的方法中传入自定义参数
比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
- vue pros 子组件接收父组件传递的值
1.子组件 ItemTemplate.vue <template> <div class="item"> <li v-for="pdata ...
- vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数
Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...
- 浅入深出Vue：子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- Vue访问子组件实例或子元素
1 尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件(例如,调用子组件的方法).为了达到这个目的,你可以通过 ref 特性为这个子组件赋予一个 ID 引用 ...
- vue.js_09_vue-父子组件的传值方法
1.父向子传递数据 1>定义一个父组件和一个子组件 2>父组件通过v-bind绑定传递的数据 :parentmsg="msg" 3>子组件需要通过 props: ...
随机推荐
- FAT32格式和NTFS格式区别
NTFS(Windows):支持最大分区2TB,最大文件2TB: FAT16(Windows):支持最大分区2GB,最大文件2GB: FAT32(Windows):支持最大分区128GB,最大文件4G ...
- redis常用命令及结构
##常用结构及命令: keys * #查询所有key randomkey #随机返回key type key #返回key的类型 exists key #判断key是否存在 del key1 key2 ...
- Linux 小知识翻译 - 「如何成为 Linux 内核开发者」
新年的开始,聊聊「怎么做才能成为Linux内核开发者」. Linux内核的开发都是由志愿开发者们完成的.他们并不属于某些特定的企业. 因此,你也有参加Linux内核开发的资格.不用说,卓越的编码技术以 ...
- Git&GitHub-进阶教程
目录 1. 远程仓库-GitHub 1.1 本地电脑如何关联GitHub? 1.2. 创建并操控远程库GitHub (1) 把一个已有的本地仓库与之关联,然后,把本地仓库的内容推送到GitHub仓库. ...
- Linux系统高树攀登之路
Linux系统高树攀登之路 Linux作为一种操作系统已经发展了这么长的时间,已然有了很多的“粉丝”,其中不乏有“通天之力”的Linux大牛,也有能在Linux世界里“快乐畅游”的强者,同时也有想要攀 ...
- Linux 与 Unix 到底有什么不同？区别在哪？
Linux 与 Unix 到底有什么不同?区别在哪? 如果你是一名20多岁或30多岁的软件开发人员,那么你已成长在一个由Linux主导的世界中.数十年来,它一直是数据中心的重要参与者,尽管很难找到明确 ...
- tomcat 设置虚拟路径的4种方法
通常使用方法1或者方法2 方法1 (添加配置文件):推荐使用,不需要重启服务器 在Tomcat根目录下的/conf/Catalina/localhost/ 路径下新建一个filename.xml,并 ...
- 复制数据库的Shell命令
mysqldump -h$host db_old -uroot -p$pass | mysql -h$host db_new -uroot -p$pass 管道符号,是unix一个很强大的功能,符号为 ...
- 【转】Android hdpi ldpi mdpi xhdpi xxhdpi适配详解
1.了解几个概念(1)分辨率.分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800.720×1280.1080×1920等.720×1280表示此屏幕在宽 ...
- 路飞学城-Python开发集训-第3章
学习心得: 通过这一章的作业,使我对正则表达式的使用直接提升了一个level,虽然作业完成的不怎么样,重复代码有点多,但是收获还是非常大的,有点找到写代码的感觉了,遗憾的是,这次作业交过,这次集训就结 ...