• 欢迎访问1024小神,一个只会Python的程序猿不是一个好司机
  • 有什么想对我说的可以在留言板里给我留言哦~
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏1024小神吧

Vue父子组件的传参方式

JS/JQ/Vue 1024小神 4个月前 (05-30) 107次浏览 0个评论


1.父子组件

1.1父传子:子组件通过 props将需要获取传递值的变量展示出来,父组件通过import引入子组件,并通过v-bind绑定需要传递的值

父文件

<template>
    <div>
     <test1 :data1='mgs'></test1>
    </div>
</template>
<script>
  import test1 from '@/components/component/test1.vue'
    export default {
        data() {
            return {
               mgs:'heheheh'
            }
        },
        components:{test1}   
    }
</script>

子文件

<template>
    <div>
       <h1>{{data1}}</h1>
    </div>
</template>

<script>
    export default {
        props:["data1"]
        
    }
</script>

1.2子传父:子组件通过$emit的方式将参数传递给父组件

父文件

<template>
    <div>
       <div>{{mgs}}</div>
       <test1 @fromTest='fromTest'></test1>
    </div>
</template>
<script>
  import test1 from '@/components/component/test1.vue'
    export default {
        data() {
            return {
               mgs:''
            }
        },
        methods:{
           fromTest(data){
               this.mgs=data
           }
        },
    components:{test1}
    }
</script>

子文件

<template>
    <div>
       <button @click="toParent">点击一下</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
               mgs:'我是要传递的值'
            }
        },
        methods:{
            toParent(){
                this.$emit('fromTest',this.mgs)
            }
        } 
    }
</script>

如有失效,请留言告知丨转载请注明原文链接:Vue父子组件的传参方式
点赞 (0)

您必须 登录 才能发表评论!