简述Vue的组件
1，组件是什么
组件是Vue.js最强大的功能之一，它可以拓展html元素，并可进行封装和重复使用。
2，组件的注册
2.1全局注册
全局注册的方法：Vue.component(‘组件名称’, { }) 第1个参数是组件名称，第2个参数是一个模板对象，当组件全局注册后所有的vue实例都可以使用。
实例：
<body>
<div id="app">
<mycm1></mycm1>
</div>
<template id="tpl">
<div>这是第一个自定义组件</div>
</template>
<script>
// 注册组件
Vue.component('mycm1', {
template: "#tpl"
})
// 创建vue实例
new Vue({
el: "#app"
})
</script>
</body>
2.1.1局部注册
局部注册组件指的是在创建的vue实例中通过components来创建。
例：
<body>
<div id="app">
<mycm1></mycm1>
</div>
<template id="tpl">
<div>这是局部的自定义组件</div>
</template>
<script>
new Vue({
el: "#app",
data: {},
methods: {
},
// 局部组件的注册
components: {
mycm1: {
template: "#tpl"
}
}
})
</script>
</body>
注：局部注册的组件只能在vue实例中使用。
3，组件传值
3.1父组件向子组件传值
父组件向子组件传值得方式是以属性形式绑定到子组件身上。然后子组件通过props属性接收
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<comy1 :parentmsg="msg"></comy1>
</div>
<template id="tmpl">
<div>
<h1> 这是子组件的内容+{{parentmsg}}</h1>
</div>
</template>
<script>
//创建 vm 实例对象
var comy1 = {
template: '#tmpl',
props: ['parentmsg']
}
const vm = new Vue({
//指定控制的区域
el: '#app',
data: {
msg: "这是父组件信息"
},
methods: {
},
components: {
comy1
}
});
</script>
</body>
3.1.2父组件向子组件传递方法
方法：在父组件中使用v-on对需要传递到的方法进行监听，在子组件中用$emit()进行接收。
例：
<body>
<div id="app">
<!-- <temp1 :parentmsg='msg'></temp1>
<h3 @click='btn'>{{msg}}</h3> -->
<temp1 :parentmsg='msg' @func='show'></temp1>
</div>
<template id="temp1">
<div>
<h3 @click='btn'>这是子组件的内容========{{parentmsg}}<h3>
</div>
</template>
<script>
var temp1={
template:'#temp1',
props:['parentmsg'],
methods: {
btn(){
// 在子组件 中接收 this.$emit('')
this.$emit('func');
}
},
}
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件的内容'
},methods: {
btn(){
this.msg='修改父组件中的值';
},
show(){
console.log('调用了父组件的show方法');
}
},
components:{
temp1
}
})
</script>
</body>
3.2子组件向父组件传值
方法：子组件用 e m i t ( ) 触 发 事 件 ， emit()触发事件， emit()触发事件，emit()第一个参数为自定义的事件名称第二个参数为需要传递的数据，父组件用v-on监听子组件的事件
<body>
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
<script type="text/javascript">
/*
子组件向父组件传值-携带参数
*/
Vue.component('menu-item', {
props: ['parr'],
template: `
<div>
<ul>
<li :key='index' v-for='(item,index) in parr'>{{item}}</li>
</ul>
<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
<button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
parr: ['apple', 'orange', 'banana'],
fontSize: 10
},
methods: {
handle: function(val) {
// 扩大字体大小
this.fontSize += val;
}
}
});
</script>
</body>