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: ...
随机推荐
- HOW TO ANSWER: Tell Me About Yourself
https://biginterview.com/blog/2011/09/tell-me-about-yourself.html There are some job interview quest ...
- AppiumLibrary常用关键字
通过上一章节,open application关键字的使用,相信大家对手机自动化充满了兴趣,那么今天这一章节,主要介绍AppiumLibrary中常用关键字的使用. 一.实用函数 关键字 含义 实例 ...
- puppet使用 apache passsenger 作为前端 (debian)
目录 1. 概要 2. nginx + passenger 配置 2.1. package 安装 2.2. 配置文件设置 2.3. 测试配置结果 2.4. 参考网址 概要 之前做过 apache + ...
- nginx 拦截 swagger 登录
随着微服务的也来越多,每个服务都有单独的文档,那么问题来了,怎么把所有文档整合在一起呢 本方法采用服务器拦截的方式进行处理 首先需要在opt 的主目录中 /opt/ 创建一个新文件 htpasswd此 ...
- Go学习笔记06-内建容器
Go学习笔记06-内建容器 Go语言 数组 *切片(Slice) #F44336 Slice的操作 Map map示例 字符处理 数组 定义数组: //这样定义数组编译器自动初始化每个元素为0 va ...
- 《Java大学教程》—第23章 Java网络编程
本章主要关注的是Java的几个应用网络编程的场景,对于网络编程没有太多深入介绍,而Java本来也没有多少针对网络编程的特性.虽然Java有个Applet的概念,但是真用这个的开发的场景其实不多. 23 ...
- [MCM] 多目标优化 MOP(multi-objective programming)
生活中许多问题都是由相互冲突和影响的多个目标组成.人们会经常遇到使多个目标在给定区域同时尽可能最佳的优化问题,也就是多目标优化问题.优化问题存在的优化目标超过一个并需要同时处理就成为多目标优化问题. ...
- lintcode 515. Paint House
Paint House 自己的写法: class Solution { public: /** * @param costs: n x 3 cost matrix * @return: An inte ...
- CRF 条件随机场工具包
CRF - 条件随机场 工具包(python/c++) 项目案例 ConvCRF+FullCRF https://github.com/MarvinTeichmann/ConvCRF 需要的包Opti ...
- python日志等级输出删选
有时候我们会删选一下输出的信息 当做日志进行文件保存 但是我们程序中有可能有自己不想存到日志文件中的输出信息 我们要做一些的删选 然后进行保存 代码如下: #!/usr/bin/python # - ...