slot

一、一般定义子组件情况：<body>　　<div id="app">　　　　<child>　　　　　　<span>123456</span>　　　　</child>　　</div>　　<script>　　　　new Vue({　　　　　　el:'#app',　　　　　　compon...

爱前端真是太好了

4121人浏览 · 2019-05-31 11:11:08

爱前端真是太好了 · 2019-05-31 11:11:08 发布

一、一般定义子组件情况：

<body>
　　<div id="app">
　　　　<child>
　　　　　　<span>123456</span>
　　　　</child>
　　</div>
　　<script>
　　　　new Vue({
　　　　　　el:'#app',
　　　　　　components:{
　　　　　　　　child:{
　　　　　　　　　　template:"<div>我是子组件</div>"
　　　　　　　　}
　　　　　　}
　　　　});
　　</script>
</body>

二、单个slot

在template中添加<slot></slot>标签

浏览器打开：<span>123456</span>内容不会显示，界面只显示：我是子组件

注：虽然<span>标签被子组件的child标签所包含，但由于他不在子组件的template属性中，因此不属于子组件

总结：slot分发其实就是父组件需要在子组件内放一些DOM，它就是负责这些DOM是否显示，在哪个地方显示的。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^