组件分发部分

<div id="app">
    <h1>我是app下面的</h1>
    <baba-component></baba-conponent>
</div>
<!--这是父组件的部分-->
<template id="baba-component">
    <span>
        <h3>我是父组件下面的</h3>
        <son-component>        <p>假如子组件slot里面没有内容就渲染这个部分,否则就渲染slot部分</p>
        </son-component>
    </span>
</template>
<!--这是子组件的部分-->
<template id="son-component">
    <div>
        <slot>bgg</slot>
    </div>
</template>/*这里注意几点:1.组件一定要注册,2.template后面一定要有一个容器包裹,否则会报错*/
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    Vue.component("baba-component",{
        template:"#baba-component"
    });
    Vue.component("son-component",{
        template:"#son-component"
    });
    var app = new Vue({
        el:"#app"
    })
</script>

组件分发是用来父子之间传递额外的内容(例如模板等),这里主要是通过template标签进行传递的。我们只要记住一点,template标签里面的内容一定要用一个容器包裹

具名slot就是通过slot标签进行匹配,加入没有匹配到的内容,仍然会有一个默认的slot,会把子组件的内容匹配到默认的slot里面去。

<div id="app">
	<h2>我是组件的标题{{message}}</h2>
	<baba-component></baba-component>
</div>
<template id="baba-component">
	<div>
		<child-component>
			<div>
				<h3 slot="header">asdasd</h3>
				<h3 slot="footer">我是一个会</h3>
			</div>
		</child-component>
	</div>
</template>
<template id="child-component">
	<div>
		<slot name="header">asdasd </slot>
		<p>asdadasdas</p>
		<p>adasdsdsadads</p>
		<slot name="footer">
			12312312312
		</slot>
	</div>
</template>

  

时间: 2024-11-08 21:48:09

组件分发部分的相关文章

组件(4):使用slot进行内容分发

组件的作用域(一) 父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译. 父子组件的编译相互独立,编译时只能使用各自作用域中的属性和方法,例如,你不可以在父组件模板内,将一个指令绑定到子组件的属性或方法上.如果这么做控制台会报一个属性未定义的错误. 如果想要绑定一个指令以便控制子组件的行为,那么你可以在子组件的模板内,将一个指令绑定到子组件的属性或方法上:或者在父组件的模板内,将指令绑定到父组件的属性或方法上. new Vue({ el: '#app-2', data:

android源码解析(三十)--&gt;触摸事件分发流程

前面一篇文章中我们分析了App返回按键的分发流程,从Native层到ViewRootImpl层到DocorView层到Activity层,以及在Activity中的dispatchKeyEvent方法中分发事件,最终调用了Activity的finish方法,即销毁Activity,所以一般情况下假如我们不重写Activity的onBackPress方法或者是onKeyDown方法,当我们按下并抬起返回按键的时候默认都是销毁当前Activity.而本文中我们主要介绍触摸事件的分发流程,从Nativ

有关vue的一点点收获

1.组件中 data 要写成以函数的形式 2.要应用别的组件的methods时, Mixins是为Vue组件分发可重用功能的灵活方式.mixin对象可以包含任何组件选项.当组件使用mixin时,mixin中的所有选项将"混合"到组件自己的选项中. 比如:  (http 是在之前import过的) 3.要想显示一个表单的话. 设定是在加载完成还是页面生成时调用这个函数就行 比如:上面图片中的getList()是获取表单内容的 我要再写一个函数: mounted() { getList()

ECOMP Architecture

摘要:       AT&T的Domain 2.0 (D2)计划聚焦于运用云技术(AT&T 集成云,the AT&T Integrated Cloud – AIC)和网络虚拟化技术来提供服务,以降低基本建设与运营费用,显著提升运营的自动化能力.ECOMP软件平台在D2环境下为承载级实时负载提供独立于产品/服务的设计.创建和生命周期管理能力.在实现AT&T D2的主要目标方面,ECOMP具有关键作用.ECOMP通过快速地部署新业务(由AT&T或第三方创建).创建云消费

Android UI线程和非UI线程

UI线程及Android的单线程模型原则 当应用启动,系统会创建一个主线程(main thread). 这个主线程负责向UI组件分发事件(包括绘制事件),也是在这个主线程里,你的应用和Android的UI组件(components from the Android UI toolkit (components from the android.widget and android.view packages))发生交互. 所以main thread也叫UI thread也即UI线程. 系统不会为

C#编程笔记一

---恢复内容开始--- 编程笔记 override与new实现的版本控制 // versioning.cs // CS0114 expected public class MyBase { public virtual string Meth1() { return "MyBase-Meth1"; } public virtual string Meth2() { return "MyBase-Meth2"; } public virtual string Met

Android线程笔记

参考来源: 郭霖.第一行代码(Android) https://www.gitbook.com/book/hzj163/android-thread/details 一.进程 进程是正在运行的程序的实例,操作系统中资源分配和保护的基本单位 二.线程 线程是进程中能够并发执行的实体,是进程的组成部分,也是处理器调度和分派的基本单位,一个进程可以同时包含多个线程,这些线程共享进程所获得的内存空间和资源,可以为完成某一项任务而协同工作,提高完成任务的速度和效率 三.创建线程 1.    继承Threa

android脚步---如何看log之程序停止运行,和UI线程和非UI线程之间切换

经常运行eclipse时,烧到手机出现,“停止运行”,这时候得通过logcat查log了.一般这种情况属于FATAL EXCEPTION,所以检索FATAL 或者 EXCEPTION,然后往下看几行 例子: 11-26 16:18:17.949: E/AndroidRuntime(5363): FATAL EXCEPTION: Thread-19311-26 16:18:17.949: E/AndroidRuntime(5363): Process: com.scme.jiance, PID:

jdk读取xml文件

前言 在写一个通用组件的时候需要读取xml文件,但是考虑到组件分发更加方便,所以进来少引用第三方的jar包,所以直接使用jdk内置的xml解析方法,当然功能和效率可能都没有第三发的组件强大. 导入的文件: import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; 解析代码: public Map loadUrlRange() { Map map = new HashMap(); tr