【Vue学习笔记】三、vue组件与生命周期

三、vue组件与生命周期

1）vue组件

vue中规定：组件的后缀名是.vue，App.vue本质上就是一个组件

每个.vue组件都由3部分组成：

• template -> 组件的模板结构
• script -> 组件的JavaScript行为
• style -> 组件的样式

注意<script>中必须要写一个默认导出export default{}，这是固定写法

.vue中的data不能像之前一样指向对象，组件中的data必须是一个函数

<template>
	<div>
        <h3>这是用户自定义的Test.vue ---- {
  { username }}</h3>
    </div>
</template>

<script>
//默认导出，这是固定写法
    export default{
        //data数据源，不能指向对象
       // data:{
       //     username: 'zs'
       // }
        //必须定义为一个函数
        data(){
            //这个return出去的{}中可以定义数据
            return{
                username:'admin'
            }
        }
    }

</script>

<style>
    .test-box{
        background-color: pink;
    }
</style>

methods、watch、computed等写法与之前一致

<script> 
export default{
        data(){
            return{
                username:'admin'
            }
        },
        methods:{
            changeName(){
                this.username = '哇哈哈'
            }
        }
    }
</script> 

2）组件之间的父子关系

3）使用组件的三个步骤

1. 使用Import语法导入需要的组件
2. 使用components节点注册组件
3. 以标签的形式使用刚才注册的组件

通过components注册的是私有子组件

例如：

在组件A的components节点下，注册了组件F，则F只能在组件A中使用

4）注册全局组件

在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件

//导入需要全局注册的组件
import Count from '@/components/Count.vue'

//参数1：字符串格式，表示组件的“注册名称”
//参数2：需要被全局注册的那个组件
Vue.component('MyCount',Count)

5）组件的props

1.创建props自定义属性

props是组件的自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性

<script>
export default{
    props:['init'],
}
</script>

在使用的注册好的组件标签时以标签属性的形式传参

<MyCount init="9"