vue-03-传值，组件属性、事件、内容

单个根元素

当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：

<h3>{ { title }}</h3>

最最起码，你会包含这篇博文的正文：

<h3>{ { title }}</h3> <div v-html="content"></div>

 

然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<div class="blog-post"> <h3>{ { title }}</h3> <div v-html="content"></div> </div>

 

组件嵌套

<div id="app"> <h1>商品列表</h1> <goods-list /> </div>

 

//子组件 var subCom = { data:function () { return { goodslist:["铅笔","钢笔","毛笔"] } }, template:`<ul><li v-for="name in goodslist">{ {name}}</li></ul>` } //父组件 let parentCom = { data:function () { return { title:"生活用品" } }, components:{ subCom:subCom }, template:`<div><h2>{ {title}}</h2><sub-com /></div>` }; var vm = new Vue({ el:"#app", data:{}, components:{ goodsList:parentCom } });

 

组件嵌套props

<div id="app"> <h1>商品列表</h1> <pen-type ></pen-type> <hr/> <shoes-type></shoes-type> </div>

 

//第一套组件<pen-type ></pen-type>

var pens = { // name:"pens", data:function () { return { goodslist:["铅笔","钢笔","毛笔","毛笔1"] } }, template:`<ul><li v-for="name in goodslist">{ {name}}</li></ul>` } let penType = { <!-- name:"penType", --> data:function () { return {title:"办公用品"} }, components:{ myPens:pens }, template:`<div><h2>{ {title}}</h2><my-pens ></my-pens></div>` };

 

//第二套组件<shoes-type></shoes-type>

var shoes = { <!-- name:"shoes", --> data:function () { return {goodslist:["李宁鞋","跑鞋","白鞋"]} }, template:`<ul><li v-for="name in goodslist">{ {name}}</li></ul>&#