java 中组合与复用_可复用性和组合

可复用性和组合就是将组件可复用性的使用和组合这个组件。

可复用性和组合

我们可以新建一个index.html和index.js，在index.html中引入index.js，然后在index.html中写入代码：

// 自定义组件名

new Vue({

el: '#main'

});

index.js中写入代码：

Vue.component("vue-hesder", {

template: '

Vue课程

'

});

我们会发现，打开页面并没有什么变化，也就是说我们可以将

这个组件放在任意地方，只要index.js这个组件引入了vue.min.js ，那么它就可以引入这个组件。在组件里我们可以写很多事件，比如我们再建一个js叫v.js，同样的我们把index.js中的内容复制到v.js在进行修改一下：

Vue.component("vue-v", {

template: '

侠课岛 - vue课程内容 vue组件

'

});

然后在index.html中引入v.js，然后我们在代码中添加组件标签。同时我们还可以在页面中添加任何css样式来对它进行修饰，但是我们不能直接用组件名进行样式的编写，我们需要在组件名里面用选择器然后通过选择器对它再进行添加才会生效。

// 错误示范，这样不会被认可且不会识别

vue-v{

color:red;

}

我们再定义一个e.js，同样的操作重复上述步骤，在引用时我们是按顺序引用的，因此给我们呈现的效果页面也是按顺序来的。

如果我们想要在其他页面也同样使用的话，那么我们可以重新建一个html比如v.html，然后一样的index.html代码，去掉index.js和e.js和相对应的组件和代码：

那么我们得到的页面就是它所单独对应的页面，也是可以的。

vue-v页面截图：

vue-e页面截图：

整个截图：

上面代码截图示例，说明了这几个组件我们可以将它重复到任何地方使用，并且可以任意组合，也就是说我们将这些组件进行复用性并统一组合起来。这样使得我们不用去重复写过多的项目代码，大大的压缩了我们的开发难度和提高了我们的开发时长效率。