VUE，子组件给父组件传递参数，props 自定义属性，ref-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE，子组件给父组件传递参数，props 自定义属性，ref。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

组件的自定义事件

<AA v-on:getAAname="demo"/>

v-on在谁身上就是给谁绑定事件
给AA这个组件的实例对象VC身上绑定了事件
如果谁触发了这个事件，demo就会被调用

<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>

CC文章来源地址https://www.toymoban.com/news/detail-620316.html

<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>