18 vue之组件通信
vue之组件通信
1 组件通信
1 组件通信 1 父子组件传值 (props down, events up) 2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型) 3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件 4 Ref<input ref="mytext"/> this.$refs.mytext 5 事件总线var bus = new Vue();* mounted生命周期中进行监听
2 父子通信之父传子：通过自定义属性
父组件定义：name:'dzg', age:18 子组件绑定：<global :myname="name" :myage="age">global> 子组件注册：props:['myname','myage'] 子组件使用：<h1>我是父组件传过来的name----->{{myname}}h1> <h1>我是父组件传过来的age----->{{myage}}h1>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<global :myname="name" :myage="age">global>
div>
body>
<script>
// 定义全局组件
Vue.component('global', {
template: `
<div>
<h1>我是全局组件</h1>
<h1>我是父组件传过来的name----->{{myname}}</h1>
<h1>我是父组件传过来的age----->{{myage}}</h1>
<button @click="handleClick">点我--{{name}}</button>
<hr>
<child></child>
</div>
`,
data() {
return {
}
},
methods: {
handleClick() {
alert('666')
}
},
props:['myname','myage']
})
let vm = new Vue({
el: '#box',
data: {
name:'dzg',
age:18
},
})
script>
html>
2.1 属性验证
props是对象，不是列表
props:{
myname:String,
isshow:Boolean,
},
案例：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <script src="js/vue.js">script> head> <body> <div id="box"> <navbar myname="egon" :isshow="false">navbar> <navbar myname="egon" isshow="false">navbar> div> body> <script> Vue.component('navbar', { template: ` <div> <button>返回</button> 父组件传递的内容是:{{myname}} 传入的布尔是{{isshow}} <button>主页</button> <br> </div> `, // props:['myname'], props:{ myname:String, isshow:Boolean, }, }) var vm = new Vue({ el: '#box', data: {}, }) script> html>
3 父子通信之子传父：通过事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子通信之子传父title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<global v-show="isShow" @myevent="handleShow">global>
div>
body>
<script>
// 定义全局组件
Vue.component('global', {
template: `
<div>
<h1>我是子组件</h1>
<button @click="handleClick">点我消失</button>
<hr>
<child></child>
</div>
`,
data() {
return {
show:false
}
},
methods: {
handleClick() {
//触发myevent的执行,把子组件中的变量b，传入到事件对应的方法上
this.$emit('myevent',this.show)
}
},
})
let vm = new Vue({
el: '#box',
data: {
isShow:true
},
methods:{
handleShow(show){
this.isShow=show
}
}
})
script>
html>
课堂案列
1.父传子案列（自定义属性）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<input type="text" v-model="myText">---->{{myText}}
<children :mytext="myText" :toast="true" aa="true">children>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: ''
},
components: {
'children': {
template: `
<div>
<h3 style="background: red">{{mytext}}</h3>
<h2>{{toast}}</h2>
<hr>
<button @click="handleClick">点我看美女</button>
</div>
`,
data() {
return {}
},
created() {
console.log("我创建了")
},
methods: {
handleClick() {
alert(this.mytext)
}
},
// props: ['mytext','toast'] // 数组中写自定义属性的名字,在data中不需要再写mytext
props: {
mytext: String, // myText必须是字符串
toast: Boolean, // 必须是布尔
},
}
},
})
script>
html>
2.子传父（自定义事件）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<child @han="handleClick">child>
<hr>
{{myText}}
div>
body>
<script>
Vue.component('child', {
template: `
<div>
<button>返回</button>
<span>{{name}}</span>
<button @click="handleC">把name传到父组件</button>
</div>
`,
data() {
return {
name: '我是子组件的name'
}
},
methods: {
handleC() {
// 会触发该组件身上的han事件对应的函数执行，参数依次传入
this.$emit('han', this.name,'lqz')
}
}
})
var vm = new Vue({
el: '.app',
data: {
myText: ''
},
methods: {
handleClick(a,b) {
this.myText = a
console.log(b)
}
}
})
script>
html>
通过子传父控制子组件的隐藏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<h1>通过父组件的变量控制h1>
<button @click="handleShow">我在父组件中，点我，显示隐藏下面的组件button>
<br>
<br>
<child v-show="show">child>
<hr>
<h1>通过子组件的事件控制h1>
<child v-show="show" @show="show1">child>
div>
body>
<script>
Vue.component('child', {
template: `
<div>
<button>返回</button>
<span>{{name}}</span>
<button @click="handleC">点我隐藏</button>
</div>
`,
data() {
return {
name: '我是子组件的name'
}
},
methods:{
handleC(){
this.$emit('show',false) // 第一个参数是自定义事件名字，后面参数是自定义事件对应的函数的参数
}
}
})
var vm = new Vue({
el: '.app',
data: {
show: true
},
methods: {
handleShow() {
this.show = !this.show
},
show1(b){
this.show=b
}
}
})
script>
html>