vue 通过插槽分发内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单事件绑定</title>
</head>
<body>
<div id="app">
<alert-box>
Something bad happened.
</alert-box>
</div>
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 定义一个名为 button-counter 的新组件
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
new Vue({
el: '#app'
}) </script>
</body>
</html>
vue 通过插槽分发内容的更多相关文章
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
- vue组件-使用插槽分发内容(slot)
slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...
- Vue组件-使用插槽分发内容
在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...
随机推荐
- java中数据库和VO的一一对应关系
如图所示,数据库中数据如果有下划线,则JavaVO中删除,除第一个单词外,其他单词首字母大写
- IronPython C#与Python相互调用
ironphy microsoft.scripting dll using System;using System.Collections.Generic;using System.Linq;usi ...
- SpringMvc支持Ajax概述【见前两篇随笔--详述前后数据互通】
1.原生javaWeb:不再用 1).导入GSON: 2).返回的数据用GSON转成json 3).写出去: 2.SpringMVC快速的完成ajax功能? 导包 jackson-annotation ...
- Qt 浅析Q_PROPERTY宏
最近在使用QProperAnimation画类,研究这个的时候看到别人写的代码有用到 Q_PROPERTY()这个宏,然后查了下,这个宏只有Qt才有的 并且需要进行编译,继承于QOBJECT Qt 手 ...
- matplotlib不显示图片
import matplotlib.pyplot as plt 绘制好图像之后,需要使用plt.show()才会显示出图片.
- 【leetcode】1004. Max Consecutive Ones III
题目如下: Given an array A of 0s and 1s, we may change up to K values from 0 to 1. Return the length of ...
- 【leetcode】944. Delete Columns to Make Sorted
题目如下: We are given an array A of N lowercase letter strings, all of the same length. Now, we may cho ...
- linux文件查找工具——locate,find
一文件查找介绍 文件的查找就是在文件系统上查找符合条件的文件. 文件查找的方式:locate, find非实时查找也就是基于数据库查找的locate,效率特别高. 实时查找:find 二locate ...
- linux基础知识-常用命令
ifconfig :查看当前ip hostname:查看主机名 vim /etc/hosts:修改地址映射 service iptables status : 查看防火墙状态 chkconfig ip ...
- C语言编译exe添加图标
C语言是一门通用的计算机编程语言,可以直接编译为可执行文件.在windows下,可执行文件的后缀是exe,我们编写一个最简单的程序test.c: #include <stdlib.h> i ...