Vue子组件与父组件之间的小Tips

最新推荐文章于 2025-12-20 00:52:11 发布

原创最新推荐文章于 2025-12-20 00:52:11 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍Vue.js中组件间传递数据的方法，包括使用大量参数时的简化方式及规范的命名约定。通过实例展示了如何利用v-bind进行批量属性绑定，并解释了父组件向子组件传递属性时的正确做法。

1.当子组件需要接收的参数很多时会写很多的:content="content"此类传参写法，可以直接用v-bind=“params”,

    const app=Vue.createApp({
        data(){
            return{
                num:1234,
                a:123,
                b:456,
            }
        },
        template:`<div><content :content="num" :a="a" :b="b"></content></div>`
    })

组件接收

  app.component('content',{
        props:[
            'content','a',"b","c"
        ],
        template: `<div>{{content}}-{{a}}-{{b}}</div>`
    })

用v-bind

  const app=Vue.createApp({
        data(){
            return{
                params:{
                    num:1234,
                    a:123,
                    b:456,
                }
            }
        },
        template:`<div><content v-bind="params"></content></div>`
    })
    app.component('content',{
        props:[
            'num','a',"b"
        ],
        template: `<div>{{num}}-{{a}}-{{b}}</div>`
    })

2.组件之间传值语法

父组件属性传值要用content-abc，子组件接收时不能用-接收需要用驼峰命名

  const app=Vue.createApp({
        data(){
            return{
               content:1234
            }
        },
        template:`<div><content :content-abc="content"></content></div>`
    })
    app.component('content',{
        props:[
           'contentAbc'
        ],
        template: `<div>{{contentAbc}}</div>`
    })
    const vm=app.mount('#root');