组件基础

组件基础

组件使用
在components中注册，也可以全局注册一个组件
每次使用组件，都重新创建了实例，变量值是不同的

推荐标签名：大驼峰

props

props是一种特别的属性，子组件使用时要在props列表上声明

export default {
    props: ['title']
}

<h4>{{ title }}</h4>

v-for中，用v-bind传递动态prop值

监听事件

在父组件中定义一个变量，调用时，自定义一个事件
子组件使用$emit来触发父组件中的事件

//父组件
<BlogPost @enlarge-text="postFontSize += 1" />

//子组件
<button @click="$emit('enlarge-text')"> Enlarge </button>

插槽分配内容

父组件中调用子组件时，写入一些html内容
可以在子组件中用<slot/>标签来插入

<AlertBox> something bad happened </AlertBox> //父

//子
<div>
    <button />
    <slot/>   --> something bad happened
</div>

动态组件

两个组件来回切换，如tab
标签：component
属性：is
is中传入的值可以是：

• 被注册的组件名
• 导入的组件对象

切换时，原组件会被卸载，可以用keepAlive让组件保持存活

模板解析注意

1、直接在dom中编写时，注意标签和属性名的大小写
要写成kebab-case形式
2、 闭合标签
要明确写出关闭标签，不能单独写成<Close />
HTMl只允许小部分特殊标签省略，如input，img，其余标签会被解析为没有结束，在最后自动补一个关闭标签

<my-component /> <!-- 我们想要在这里关闭标签... -->
<span>hello</span>

解析为

<my-component>
  <span>hello</span>
</my-component> <!-- 但浏览器会在这里关闭标签 -->

3、 元素位置限制
某些元素中不能直接放置组件，如table

<table>
  <blog-post-row></blog-post-row>
</table>

这里的组件<blog-post-row>无效