1. 全局组件注册语法
image.png
image.png
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<btn-count></btn-count>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//组件注册
Vue.component('btn-count',{
data(){
return {
count:0
}
},
template:
`
<button @click="add">点击了{{ count }}次</button>
`
,
methods:{
add(){
this.count++;
}
}
})
//vm实例,也是组件
let vm = new Vue({
el:'#app',
data:{
}
})
</script>
</html>
2. 局部组件注册语法
** 局部组件只能在注册他的父组件中使用 **
image.png
/* 局部组件单独定义*/
let HelloWorld = {
data(){
return {
msg:'helloworld'
}
},
template:`<div>{{msg}}</div>`
};
let HelloVue = {
data(){
return {
msg:'HelloVue'
}
},
template:`<div>{{msg}}</div>`
}
//vm实例,也是组件
let vm = new Vue({
el:'#app',
data:{
},
//局部组件,这里引用只能在#app的作用范围
components:{
'hello-world':HelloWorld,
'hello-vue':HelloVue,
}
})
3. 非父子组件
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>父组件</div>
<test-tom></test-tom>
<test-jack></test-jack>
</div>
<!-- ************** -->
<template id="test-tom">
<div>
<div>tom:{{ num }}</div>
<button @click="handle">点击</button>
</div>
</template>
<template id="test-jack">
<div>
<div>jack:{{ num }}</div>
<button @click="handle">点击</button>
</div>
</template>
<!-- ******************* -->
<script src="./js/vue.js"></script>
<script>
//定于一个事件中心
let eventBus = new Vue();
//定义一个组件
let TestTom = {
data(){
return {
num:0
}
},
template:'#test-tom',
methods:{
handle(){
//触发兄弟组件的事件
eventBus.$emit('jack-event',3)
}
},
mounted(){
//监听事件
eventBus.$on('tom-event',(val)=>{
//写箭头函数是为了方便this指向该组件
this.num += val;
//val是兄弟组件传递的值
})
}
}
//定义一个组件
let TestJack = {
data(){
return {
num:0
}
},
template:'#test-jack',
methods:{
handle(){
//触发兄弟组件的事件
eventBus.$emit('tom-event',1)
}
},
mounted(){
//监听事件
eventBus.$on('jack-event',(val)=>{
//写箭头函数是为了方便this指向该组件
this.num += val;
//val是兄弟组件传递的值
})
}
}
let vm = new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
TestTom,
TestJack
}
})
</script>
</body>
</html>
三种不常用的通信
- ref通信
<child ref="child"/>
在父组件的
this.$refs.child 就是这个子组件实例
注意：
不建议直接通过ref操作子组件
-
parent
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<home></home>
</div>
<script>
let CommonTitle = {
props:['title','arr'], //properties props 父向子 传入的数据列表
template:`
<div>
这是标题
<h2>
{{ title }}
</h2>
<ul>
<li v-for="item in arr" :key="item">
{{item}}
</li>
</ul>
</div>
`,
data(){
return {
msg:123
}
},
mounted(){
console.log(this.$parent)
}
}
let Home = {
template:`
<div>
<common-title :title="title"></common-title>
home页内容
</div>
`,
data(){
return {
title:"我是home页111"
}
},
mounted(){
console.log(this.$children)
},
components:{
CommonTitle
}
}
let vm = new Vue({
el:"#app",
components:{
Home
}
})
</script>
</body>
</html>
- provide inject
父组件中
{
provide:{
msg:'1234',
num:12
},
data,
template,
methods
}
子组件中
{
inject:['msg','num']
// 挂载到了 子组件的 实例的 属性上 注意不要和data或者props或者计算属性或methods重名
}
