正文
vue组件总结（三）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、什么是组件
组件（component）是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码，根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己的需要，使用不同的组件来拼接页面。这种开发模式使得前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。组件是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容。
二、注册组件
组件注册包括全局注册和局部注册两种
-
调用
Vue.component()注册组件时，组件的注册是全局的 ，这意味着该组件可以在任意Vue示例下使用。（ 全局注册的行为必须在根Vue实例创建之前发生） - 如果不需要全局注册，或者是让组件使用在其它组件内，可以用 选项对象的components属性实现局部注册。（局部注册组件在子组件中不可用）
【全局组件】要注册一个全局组件，可以使用Vue.component(tagName,option)，组件在注册之后，便可以在父实例的模块中以自定义元素<my-component></my-component>的形式使用，实例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style type="text/css">
.container{
width: 200px;
height: 300px;
border: 2px solid blue;
}
.container h2{
font-size: 30px;
font-style: normal;
}
</style>
</head>
<body>
<div id="app">
<!--使用组件，全局组件可以多次使用-->
<my-component></my-component>
</div>
<div id="app2">
<!--使用组件，全局组件可以多次使用-->
<my-component></my-component>
<my-component2></my-component2>
</div>
<!--定义组件的视图-->
<template id="demo3">
<h1 style="color:red">我是选项模板3</h1>
</template>
<!--定义组件的视图-->
<script type="x-template" id="demo4">
<div class="container">
<h1 style="color:red">我是script标签模板4</h1>
<h2>我是script标签模板</h2>
</div>
</script> <script>
//全局注册组件，全局组件可以多次使用
Vue.component("my-component",{
template:"#demo3"
});
//全局注册组件，全局组件可以多次使用
Vue.component("my-component2",{
template:"#demo4"
});
var vm1 = new Vue({
el: "#app"
});
var vm2 = new Vue({
el: "#app2"
})
</script>
</body>
</html
运行效果如下所示：
【局部注册】通过使用组件实例选项component注册，可以使组件仅在另一个实例或者组件的作用域中可用，实例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style type="text/css">
.container{
width: 200px;
height: 300px;
border: 2px solid blue;
}
.container h2{
font-size: 30px;
font-style: normal;
}
</style>
</head>
<body> <template id="demo1">
<h1 style="color:red">我是局部组件的布局模板1</h1>
</template> <script type="x-template" id="demo2">
<div class="container">
<h1 style="color:red">我是script标签构建的布局模板</h1>
<h2>我是script标签模板</h2>
</div> </script> <div id="app1">
<my-component1></my-component1>
<my-component2></my-component2>
</div>
<div id="app2">
<!--无法在app2这里使用，因为是子组件是在app2中局部注册的-->
<my-component1></my-component1>
<my-component2></my-component2>
</div>
<script>
//子组件1
var child1 = {
template:"#demo1"
};
//子组件2
var child2 = {
template:"#demo2"
};
var vm1 = new Vue({
el: "#app1",
components:{
//注册子组件，<my-component1>和<my-component2>只能在app1使用
"my-component1":child1,
"my-component2":child2
}
});
var vm2 = new Vue({
el: "#app2"
})
</script>
</body>
</html>
运行效果如下所示：
三、组件之间传值
3.1. 父组件向子组件传值
-
子组件在props中创建一个属性，用以接收父组件传过来的值
-
在父组件中注册子组件；
-
在子组件标签中添加子组件props中创建的属性；
-
把需要传给子组件的值赋给该属性
子组件在props中创建一个属性，用以接收父组件传过来的值
在父组件中注册子组件；
在子组件标签中添加子组件props中创建的属性；
把需要传给子组件的值赋给该属性
实例如下所示：
父组件：
<template>
<!-- 父组件 -->
<div id="app">
父组件:
<input type="text" v-model="name">
<!-- 引入子组件 -->
<child :inputName="name"></child>
</div>
</template> <script type="text/ecmascript-6">
import child from './child'
export default {
components: {
child
},
data () {
return {
name: ''
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
子组件：
<template>
<div>
<!--子组件-->
子组件:
<span>{{inputName}}</span>
</div>
</template> <script type="text/ecmascript-6">
export default {
/* 接受父组件 */
props: {
inputName: String,
required: true
} }
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
运行效果如下所示：
3.2.子组件向父组件传值
-
子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
3.在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
实例如下所示：
子组件：
<template>
<div id="app">
子组件:
<span>{{childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template> <script type="text/ecmascript-6">
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
methods: {
childClick () {
console.log('childClick')
// childByValue是在父组件on监听的方法
// 第二个参数this.childValue是需要传的值
this.$emit('childByValue', this.childValue)
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
父组件：
<template>
<div>
父组件:
<span>{{name}}</span>
<br>
<br>
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child-component v-on:childByValue="childByValue"></child-component>
</div>
</template> <script type="text/ecmascript-6">
import childComponent from './childComponent'
export default {
components: {
childComponent
},
data () {
return {
name: ''
}
},
methods: {
childByValue: function (childValue) {
// childValue就是子组件传过来的值
this.name = childValue
console.log(this.name)
}
}
}
</script> <style lang="stylus" rel="stylesheet/stylus" scoped> </style>
运行效果如下所示：
