当前位置：首页 > news >正文

VUE，子组件给父组件传递参数，props 自定义属性，ref

news 2025/8/11 16:56:43

<template><div><!-- 子传父 --><!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 --><AA :getAAname="getAAname"/><h1>AA：{{aaname}}</h1><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递参数（@或者v-on） --><BB v-on:eventBB="getBBname"/><h1>BB{{bbname}}</h1><!-- <BB v-on:eventBB.once="getBBname"/> --><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递参数（使用ref实现 --><CC ref="CC"/><h1>CC{{ccname}}</h1></div>
</template><script>import 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.aaname=val},// 02:BB使用自定义事件实现getBBname(val){console.log('获取BB组件的名字1',val)this.bbname=val},// 注意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.ccname=val},},// 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)}
</script>

AA组件

<template><div><div>我是A组件的数据{{name}}</div><button @click="sent">点击把AA组件的名字传递给父组件</button></div>
</template>
<script>export default {data() {return {name:"小艾",}},props: {getAAname: {},},methods: {sent() {this.getAAname(this.name)}},}
</script>

<template><div><div>我是B组件的数据{{name}}</div><button @click="sent">点击把AA组件的名字传递给父组件</button><button @click="unbind">解绑</button></div>
</template>
<script>export 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();  }},}
</script>

<template><div><div>我是B组件的数据{{name}}</div><button @click="sent">点击把CC组件的名字传递给父组件</button></div>
</template>
<script>export 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>