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

Vue 组件通信 - 父传子

article 2025/3/7 3:58:39

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue 组件通信 - 父传子

组件通信

父传子示例1

封装导航

右侧按钮显示与隐藏

属性验证

父传子示例2

总结

组件通信

父传子示例1

封装导航

组件父传子示例，通过对导航封装为组件来做演示。

首先封装一个全局的导航组件，接收一个myname参数。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    <div style="background-color: yellow">根组件标题</div>
    <navbar myname="首页"></navbar>
    <navbar myname="分类"></navbar>
</div>
<script>
    // 定义一个全局组件
    Vue.component("navbar", {
        props: ["myname"], // 接收myname属性， this.myname
        template: `<div>
            <button>左</button>
            <span>{{myname}}</span>
            <button>右</button>
        </div>`
    })
    let vm = new Vue({
        el:"#box",
        data:{}
    })
</script>

右侧按钮显示与隐藏

通过指令控制右侧按钮显示与隐藏，需使用动态绑定进行传值；

否则绑定的值不是布尔值，而是字符串。

示例如下：

<div id="box">
    <div style="background-color: yellow">根组件标题</div>
    <navbar myname="首页" :myright="true"></navbar>
    <navbar myname="分类" :myright="false"></navbar>
</div>
<script>
    // 定义一个全局组件
    Vue.component("navbar", {
        props: ["myname", "myright"], // 接收myname属性， this.myname
        template: `<div>
            <button>左</button>
            <span>{{myname}}</span>
            <button v-show="myright">右</button>
        </div>`
    })

属性验证

导航组件使用中，需要对组件传递的属性值进行验证。

示例如下：

Vue.component("navbar", {
    //props: ["myname", "myright"], // 接收myname属性， this.myname
    props : {
        myname : String,
        myright: Boolean
    }, // 接收myname myright属性， 属性验证
    template: `<div>
        <button>左</button>
        <span>{{myname}}</span>
        <button v-show="myright">右</button>
    </div>`
})

当传递的属性值，不符合属性设置类型时，控制台会提示错误。

截图如下：

默认属性

还可以设置组件属性的默认属性值。

示例如下：

props : {
    myname : {
        type: String,
        default: ""
    },
    myright: {
        type: Boolean,
        default: true
    }
}, // 接收myname myright属性， 属性验证, 默认属性

父传子示例2

通过Vue全局变量传给组件属性。

示例如下：

<div id="box">
    <div style="background-color: yellow">根组件标题</div>
    <navbar myname="首页" :myright="false" :myparent="parent"></navbar>
    <navbar myname="分类" :myparent="parent"></navbar>
</div>

Prop中定义接收该值，然后在该组件中应用。

示例如下：

<script>
    // 定义一个全局组件
    Vue.component("navbar", {
        //props: ["myname", "myright"], // 接收myname属性， this.myname
        props : {
            myname : {
                type: String,
                default: ""
            },
            myright: {
                type: Boolean,
                default: true
            },
            myparent: {
                type:String,
                default:""
            }
        }, // 接收myname myright属性， 属性验证, 默认属性
        template: `<div>
            <button>左</button>
            <span>{{myname}}--{{myparent}}</span>
            <button v-show="myright">右</button>
        </div>`
    })
    let vm = new Vue({
        el:"#box",
        data:{
            parent: "这是一首简单的小情歌"
        }
    })
</script>