注册全局组件
<!--注册全局组件-->
<div id="app">
<!--
组件使用驼峰命名法使用时候需要使用-小写调用
-->
<my-com1></my-com1>
</div>
<script>
/*
使用Vue.component创建组件，参数1为组件名称
*/
Vue.component('myCom1', {
//通过template属性指定组件要展示的html结构
template: '<h3>Vue.extend创建组件</h3>'
})
let vm = new Vue({
el: '#app',
data: {}
})
</script>
<!--注册全局组件-->
<div id="app">
<mycom1></mycom1>
</div>
<!--在被控制的#app外使用template 元素-->
<template id="temp1">
<div>
<h1>通过template组件</h1>
</div>
</template>
<script>
Vue.component('mycom1',{
template:'#temp1'
})
let vm=new Vue({
el:'#app',
data:{
}
})
</script>
注册私有组件
<div id="app2">
<login></login>
</div>
<template id="temp2">
<h2>私有组件</h2>
</template>
new Vue({
el:'#app2',
data:{},
methods:{},
filters:{},
directives:{},
components:{ //定义私有组件
login:{
template:'#temp2'
}
},
beforeCreate(){},
created(){},
beforeMount(){},
mounted(){},
beforeUpdate(){},
updated(){},
beforeDestroy(){},
destroyed(){}
})
父组件传递值到子组件
<div id="app">
<!--父组件可以在引用子组件时候可以通过属性绑定的形式，
把需要传递给子组件的数组以属性绑定的形式传递-->
<com1 :parentmsg="msg"></com1>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '123 父组件'
},
methods: {},
components: {
//子组件中默认无法访问父组件中的data上的数据和methods中的函数
com1: {
/*
组件中的所有props数据都是通过父组件传递的
把父组件传递的属性定义好才能使用父组件传递参数
props中的数据都是只读的
*/
props: [
'parentmsg'
],
template: '<h1>子组件--{{parentmsg}}</h1>'
}
}
})
</script>
父组件传递函数到子组件
<div id="app">
<!--父组件向子组件传递方法使用事件绑定机制-->
<com2 @func="show"></com2>
</div>
<template id="temp1">
<div>
<h1>这是自组件</h1>
<input type="button" value="点击" @click="myClick" />
</div>
</template>
<script>
let vm = new Vue({
el: '#app',
data: {},
methods: {
show(data) {
console.log(data)
}
},
components: {
com2: {
template: '#temp1',
data() {
return {
son: { name: '张三', age: 123 }
};
},
methods: {
myClick() {
console.log("ok")
//使用emit调用父组件传递函数，第一个参数是函数名称，后边参数为传递的参数
this.$emit('func', this.son)
}
}
}
}
})