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>`})属性验证
导航组件使用中，需要对组件传递的属性值进行验证。
示例如下：
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>`
})当传递的属性值，不符合属性设置类型时，控制台会提示错误。
截图如下：
默认属性
还可以设置组件属性的默认属性值。
示例如下：
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 组件通信 - 父传子
