益阳建设公司网站,南宁 网站开发,电子商城平台,购物国外网站的建立templatediv!-- 子传父 --!-- 通过父组件给子组件传递函数类型的props实现#xff1a;子给父传递数据 --AA :getAAnamegetAAname/h1AA#xff1a;{{aaname}}/h1!-- 通过父组件给子组件绑定一个自定…templatediv!-- 子传父 --!-- 通过父组件给子组件传递函数类型的props实现子给父传递数据 --AA :getAAnamegetAAname/h1AA{{aaname}}/h1!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递参数或者v-on --BB v-on:eventBBgetBBname/h1BB{{bbname}}/h1!-- BB v-on:eventBB.oncegetBBname/ --!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递参数使用ref实现 --CC refCC/h1CC{{ccname}}/h1/div
/templatescriptimport AA from /components/lineComponent/AA.vue;import BB from /components/lineComponent/BB.vue;import CC from /components/lineComponent/CC.vue;export default {components: {AA,BB,CC},data() {return {aaname : ,bbname : ,ccname : ,}},methods: {// 01:AA使用props方法实现getAAname(val) {console.log(获取AA组件的名字,val)this.aanameval},// 02:BB使用自定义事件实现getBBname(val){console.log(获取BB组件的名字1,val)this.bbnameval},// 注意1参数比较多的时候// getBBname1(val1,val2){// console.log(获取BB组件的名字1,val1,val2)// }// 注意2参数比较多的时候 更推荐的写法// params是一个数组// getBBname1(val1,...params){// console.log(获取BB组件的名字1,val1,params)// } // 03:CC使用自定义事件实现getCCname(val){console.log(获取CC组件的名字1,val)this.ccnameval},},// 03:CC// 需求是等过了10秒才去获取BB中的参数// 更灵活的写法mounted () {this.$refs.CC.$on(eventCC,this.getCCname)// 注意// this.$refs.CC.$on(eventCC,function getCCname(){// console.log(this) //此处的this指的是 CC组件而不是getAABB组件// })// setTimeout((){// console.log(可以了);// },10000)},// 只触发一次// this.$refs.CC.$once(eventCC,this.getCCname)}
/scriptAA组件
templatedivdiv我是A组件的数据{{name}}/divbutton clicksent点击把AA组件的名字传递给父组件/button/div
/template
scriptexport default {data() {return {name:小艾,}},props: {getAAname: {},},methods: {sent() {this.getAAname(this.name)}},}
/scriptBB
templatedivdiv我是B组件的数据{{name}}/divbutton clicksent点击把AA组件的名字传递给父组件/buttonbutton clickunbind解绑/button/div
/template
scriptexport default {data() {return {name: 小贝,age:19}},methods: {sent() {this.$emit(eventBB,this.name)},// 注意1参数比较多的时候// sent1() {// this.$emit(eventBB,this.name,this.age)// }// 注意2参数很多// sent2() {// this.$emit(eventBB,this.name,this.age)// }unbind(){// 解绑一个自定义事件this.$off(eventBB)// 解绑多个自定义事件// this.$off([eventBB,eventBBB]);// 解绑所有的自定义事件// this.$off(); }},}
/scriptCC
templatedivdiv我是B组件的数据{{name}}/divbutton clicksent点击把CC组件的名字传递给父组件/button/div
/template
scriptexport default {data() {return {name: 小扣,age:19}},methods: {sent() {this.$emit(eventCC,this.name)},// 注意1参数比较多的时候// sent1() {// this.$emit(eventCC,this.name,this.age)// }// 注意2参数很多// sent2() {// this.$emit(eventCC,this.name,this.age)// }},}
/script
