内联模板
组件的模板一般都是在template选项内定义的，Vue提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当作模板，而不是把它当内容分发，这让模板更灵活。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <title>内联模板</title> </head> <body> <div id="app"> <child-component inline-template> <div> <h2>在父组件中定义组件的模板 <p>{{message}}</p> <p>{{msg}}</p> </h2> </div> </child-component> </div> <script> Vue.component('child-component',{ data: function () { return { msg: '在子组件声明的数据' } } }); var app = new Vue({ el: '#app', data: { message: '在父组件中声明的数据' } }); </script> </body> </html>
渲染结果为：
在父组件中声明的数据message和子组件中声明的数据msg，两个都可以渲染（如果同名，优先使用子组件的数据）。这反而是内联模板的缺点，就是作用域比较难理解，如果不是非常特殊的场景，建议不要轻易使用内联模板。