Vue学习笔记之组件基础

1、组件的定义

一般将 Vue 组件定义在一个单独的 .vue 文件中，称做单文件组件；当然也可以将组件直接定义在js文件中，如下js代码，定义一个组件BlogPost，通过props定义对外暴露属性title，父组件传递title，子组件根据title渲染html内容。

export default {
    props: ['title'],
    template: `
     

         
{{ title }}
     
`
}

2、组件的使用

首先需要引用组件，语法格式import BlogPost from './BlogPost.js'，然后在vue应用对象中注册组件，在components区域注册即可，最后在DOM元素内部使用标签格式，如代码应用子组件，并传递title属性给子组件渲染。

3、组件的重复应用

可以使用v-for语法循环创建子组件，如代码所示：

4、给组件传递事件

组件中模板声明一个按钮，并使用@click绑定点击事件，使用$emit抛出一个事件名为enlarge-text，并通过emits定义对外抛出的事件名称enlarge-text，定义如下代码所示：

export default {
    props: ['title'],
    emits: ['enlarge-text'],
    template: `
     

         
{{ title }}
         Enlarge text
     
`
}

应用组件，应用中定义字体大小属性postFontSize，在组件blog-post应用的代码处定义事件@enlarge-text="postFontSize+=0.1"，点击后触发字体+0.1：

5、插槽的应用

在组件中定义一个插槽，模板中语法，

export default {
    template: `
     

         This is an Error for Demo Purpose
         
     
`
}

在vue应用中给插槽传递html内容，alert-box元素中的内容“Something bad happened.”将传递给组件的插槽：

    
        Something bad happened.
    
    

        

            
123
            
456