slot插槽，keep-alive

模板中只能有一个根元素，但可以通过元素属性制定模板
<slot>插槽就可以实现，相当于先占个位置，后面需要填东西再把这个位置让出给填的内容
插槽中可以放一些默认的内容，若不传递就会用这个默认内容，传递内容就会覆盖默认内容
可以设置name属性如name="title"，在后面添加自己的内容的时候用slot="title"来表明要插在哪个地方，没有指定name的内容都会被插到默认插槽的地方

"是否删除"会一直放在前面，因为他指定了是title这个插槽
<div id="app">
    这里的东西除了属性名是子组件的，其他都是父级组件的
    <modal><p slot="content">确认删除吗</p><h1 slot="title">是否删除</h1></modal>
</div>

<template id="modal">
    <div>
        <slot name="title">这是默认标题</slot>
        <slot name="content">这是默认内容</slot>
        <slot name="default">原先默认的内容</slot>
    </div>
</template>

在子组件上定义点击事件，触发的是父组件上的方法，点击"是否删除"，触发了父组件methods中的fn方法

<modal>
    <p slot="content">确认删除吗</p>
    <h1 slot="title" @click="fn">是否删除</h1>
</modal>

父组件要想操作子组件的方法，可使用ref属性
在mounted钩子函数中通过this.$refs调用，ref属性放在组件上获取的是组件的实例，并不是dom元素
keep-alive一般用作缓存，保证组件创建之后不会被销毁，这样下次再调用该组件就不会重新创建消耗资源
keep-alive的组件重新进入会触发activeted钩子函数，离开时会触发deactivated钩子函数

<keep-alive>
     <component :is="radio"></component>
</keep-alive>