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.mynametemplate: `<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.mynametemplate: `<div><button>左</button><span>{{myname}}</span><button v-show="myright">右</button></div>`})

属性验证

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

示例如下：

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

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

截图如下：

默认属性

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

示例如下：

javascript">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.mynameprops : {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>

总结

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