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>