前端框架vue.js系列（8）：嵌套元素、导入外部文件作为模板

组件嵌套元素

一般定义组件，组件内不会再嵌套其他元素标签，如下所示：

	
我是嵌套标签

此时

元素标签并不会渲染出来。当然，正常情况下也不会有这种需求，因为如果你需要显示

标签，只要写入到组件内即可。那有个疑问就是既然可以往组件内传参，那可不可以往组件内传递元素标签呢？这就意味着子组件的元素标签结构由父组件来决定。答案是可以的，这就是组件嵌套元素。

组件嵌套元素：在子组件中使用标签来替换父组件嵌入的标签，demo如下：

	

		
		
			
我是嵌套标签，位置位于模板的slot元素下
		
	

运行结果：

 

 

导入.html文件作为模板

正常情况下，使用直接引用vue.js文件的方式，定义模板都使用来定义，更加方便的写法是直接通过文本写到template中。但是这都有一定的局限性，如在不同页面，以上的模板定义方法均不可以实现模板共享。此时，需要将模板写到一个独立的文件中，通过导入实现模板共享。

我们新建一个com.html文件，这个文件作为模板，代码如下：

我是导入模板    自身参数：{{a}}|外部入参：{{b}}

导入com.html我们需要借助jquery.js，代码如下：

运行结果：

（贴士）如果使用es6通过import导入文件，会更加规范和便捷。