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>Title</title> <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>Title</title> <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>Title</title> <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>Title</title> <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>