1.父子通信
父子之间通信，在子组件中可以接收父组件传入的值：基于属性传递?通过props接收；
通过props接受的属性和data数据一样，是直接挂载到实例上的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.panel {
width: 300px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<vote v-for="(item,index) in list" :key="index" :title="item" :num="'89'"> </vote>
</div>
</div>
<template id="Vote">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{title}}---{{num}}
</h3>
</div>
<content-vote :num='num'></content-vote>
<footer-vote></footer-vote>
</div>
</template>
<template id="ContentVote">
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">支持人数：{{num}}</div>
<div class="list-group-item">反对人数：10</div>
<div class="list-group-item">支持率：90%</div>
</div>
</div>
</template>
<template id="FooterVote">
<div class="panel-footer text-center">
<button class="btn btn-success">支持</button>
<button class="btn btn-danger">反对</button>
</div>
</template>
<script>
const ContentVote={
template: '#ContentVote',
props:['num']
}
const FooterVote={
template: '#FooterVote'
}
Vue.component('Vote', {
template: '#Vote',
props:['title','num'],
components: {
ContentVote,
FooterVote
},
created() {
console.log(this.a,this.title);
},
})
let vm = new Vue({
el: '#app',
data:{
list:['李白','马超','关羽']
}
})
</script>
</body>
</html>
2.子传父是通过基于自定义事件传递，在子组件中通过$emit接收?
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>父组件中的num: {{num}}</h2>
<my-component :num="num" @parentEvent="add" ></my-component>
</div>
<template id="MyComponent">
<div>
<p>子组件中的num: {{num}}</p>
<p><button @click=" $emit('parentevent',n)">让num自加</button></p>
</div>
</template>
<script>
Vue.component('MyComponent',{ //注册全局组件
data(){
return {
n:30
}
},
template:'#MyComponent', //组件的html
props:['num','add'], //接受父元素传过来的参数
methods: {
addFn(n){
console.log(123);
this.$emit('parentevent',n);
}
},
})
let vm=new Vue({
el:"#app",
data:{
num:10
},
methods: { //存放方法 事件类
add(n=1){ //默认值 如果不传参数 默认为1
console.log(456)
this.num+=n;
}
},
})
</script>
</body>
</html>
?3.兄弟之间传值通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，通过$on监听事件， $emit触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo3</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<vote></vote>
<vote></vote>
<vote></vote>
</div>
<template id="Vote">
<div>
<a-component :vue="vue"></a-component>
<b-component :vue="vue"></b-component>
</div>
</template>
<template id="A">
<div>
<p>A组件中的num: {{num}}</p>
</div>
</template>
<template id="B">
<div>
<p>B组件:<button @click="addFn(20)">更改A组件的数据</button></p>
</div>
</template>
<script>
const AComponent={
template:'#A',
data(){
return {
num:100
}
},
props:['vue'],
methods: {
add(n=1){
this.num+=n
}
},
created() {
this.vue.$on('brotherEvent',this.add)
},
}
const BComponent={
template:'#B',
props:['vue'],
methods: {
addFn(n){
this.vue.$emit('brotherEvent',n)
}
},
}
const Vote={
template:'#Vote',
data(){
return {
vue:new Vue
}
},
components:{
AComponent,
BComponent
}
}
let vm=new Vue({
el:"#app",
components:{
Vote
}
})
</script>
</body>
</html>
?以上就是三种常用的vue组件通信的方式。
?
|