vue的学习之路（Vue中组件(component )

（1）一个组件负责一组功能 实现组件之间的隔离

（2） 组件还可以实现复用

（3）减少vue实例对象中代码量

二、vue中的组件

============================================================================

1、组件作用

Vue中组件 (component[kəmˈpoʊnənt])

组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。

2、组件分类

• 全局组件 直接注册给vue实例

• 局部组件 注册给vue实例中的compents属性 只能在vue中使用

3、全局组件注册

说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件

（1）全局组件使用案例

{{msg}}

---

（2）全局组件具体使用

• 1.开发全局组件

/*

新建登录全局组件：

• 参数一：当前全局组件的名字

参数二：当前全局组件的配置对象

• */

Vue.component(“login”,{

// 组件对应标签内容

template:`

姓名：

密码：

`

})

• 2.使用全局组件 在Vue实例范围内

（3）注意事项:

• 1.Vue.component用来开发全局组件

参数1: 组件的名称

参数2: 组件配置{} template:’'用来书写组件的html代码 template中必须有且只有一个root元素

• 2.使用时需要在Vue的作用范围内根据组件名使用全局组件

• 3.如果在注册组件过程中使用 驼峰命名组件的方式 在使用组件时 必须将驼峰的所有单词小写加入-线进行使用

4、局部组件注册

说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加

• 语法

new Vue({

el:“#app”,

data:{},

methods:{},

computed:{},

components:{

“组件名”：{

//组件的配置对象

}

}

})

（1）局部组件注册案例

{{msg}}

---

---

• 注意：其中添加div的意义就是让template标签有一个根标签 ，否则只展示“欢迎进入登录程序”

• 不加div效果图

（2）两种开发方式

• 第一种开发方式

//局部组件登录模板声明

let login ={ //具体局部组件名称

template:‘

用户登录

’

};

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{ //用来注册局部组件

login:login //注册局部组件 es6的新特性可以直接写login，也可以的

}

});

//局部组件使用 在Vue实例范围内

• 第二种开发方式

//1.声明局部组件模板 template 标签 注意:在Vue实例作用范围外声明

用户登录

//2.定义变量用来保存模板配置对象

let login ={ //具体局部组件名称

template:‘#loginTemplate’ //使用自定义template标签选择器即可

};

//3.注册组件

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{ //用来注册局部组件

login:login //注册局部组件

}

});

//4.局部组件使用 在Vue实例范围内

5、Prop的使用

作用:props用来给组件传递相应静态数据或者是动态数据的

(1)通过在组件上声明静态数据传递给组件内部

//1.声明组件模板配置对象

let login = {

template:“

欢迎:{{ userName }} 年龄:{{ age }}

”,

props:[‘userName’,‘age’] //props作用 用来接收使用组件时通过组件标签传递的数据

}

//2.注册组件

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{

login //组件注册

}

});

//3.通过组件完成数据传递

总结:

1.使用组件时可以在组件上定义多个属性以及对应数据

2.在组件内部可以使用props数组生命多个定义在组件上的属性名

3.日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

(2)通过在组件上声明动态数据传递给组件内部

//1.声明组件模板对象

const login = {

template:‘

欢迎: {{ name }} 年龄:{{ age }}

’,

props:[‘name’,‘age’]

}

//2.注册局部组件

const app = new Vue({

el: “#app”,

data: {

username:“小陈陈”,

age:23

},

methods: {},

components:{

login //注册组件

}

});

//3.使用组件

//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

(3) prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 ：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

• 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定 ：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

• 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不 应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网

(4)父组件向局部组件传递静态数据

{{msg}}

(5)父组件向局部组件传递动态数据

{{msg}}

6、组件中定义数据和事件使用

1. 组件中定义属于组件的数据

{{msg}}