Vue 嵌套组件通信注意事项
运行效果：
一、Prop 传值
1.绑定静态数据
<com-example msg="i am a message,static content"></com-example>2.绑定变量
<com-example v-bind:msg="obj"></com-example>3. 注意事项-Prop 的大小写问题(camelCase vs kebab-case)
一定要注意大小写的问题，不然会报出找不到属性的错误：
（就是因为，我在list中，直接使用v-bind:layoutData="layoutData" 这样写的，就会出现如下错误，应写为v-bind:layout-data="layoutData"）
以下内容，摘自官网：
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
注意如果实用{{var}},或者给post-title=”var”, var是一个 data值变量的话，大小写限制是不存在的，会直接被vue渲染。
<script>
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
</script>
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
二、父子组件的嵌套和通信（传值）
example
描述：
page页面中使用了 base-layout 组件， base-layout中嵌套了 page-ibox 组件.
page页面像 base-layout 传值，base-layout 向 page-ibox组件传递 Tilt 和 Content。
page 页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../shared/base-layout.jsp"%>
<%@include file="../shared/page-header.jsp"%>
<div id="_wrapper">
<base-layout v-bind:layout-data="layoutData"><br/>
<div solt="page-header">page-header</div>
<div>default solt content</div>
</base-layout>
</div>
<script>
var app = new Vue({
el:"#_wrapper",
data:{
layoutData:{
iboxData:{
title:"ibox Title xx",
content:"ibox content xx"
}
},
}
})
</script>
base-layout 和 page-ibox 组件
<template id="base-layout">
<div id="template-wrapper">
<%@include file="_navigation.jsp"%>
<div id="page-wrapper" class="gray-bg">
<header><slot name="page-header"></slot></header>
<main id="content">
<slot></slot><!--默认插槽-->
<%--<page-ibox v-bind:title="layoutData.iboxData.title" v-bind:content="layoutData.iboxData.content"></page-ibox> <!--base-layout 的子组件-->--%>
<page-ibox v-bind="layoutData.iboxData"></page-ibox> <!--base-layout 的子组件-->
<h2>{{testStr}}</h2>
</main>
<%@include file="_footer.jsp"%>
</div>
</div>
</template>
<template id="page-ibox">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>{{title}}</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">Config option 1</a>
</li>
<li><a href="#">Config option 2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
{{content}}
</div>
</div>
</template>
<script type="text/javascript">
var pageIbox = {
template:"#page-ibox",
props:{
title:String,
content:String
}
};
</script>
<script>
Vue.component("base-layout",{
template:"#base-layout",
components:{
"page-ibox":pageIbox
},
data:function() {
return {testStr:"我是base-layout data : TestStr"}
},
props:{
layoutData:Object
}
})
</script>