<p><code></p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>环境安装完成后,开始自定义公用组件<br />1、全局组件<br />在src/components目录新建common目录,创建header.vue,写入代码:</p> <p><span class="img-wrap"><img data-src="/img/bVbrb3d?w=421&amp;h=200" src="/img/bVbrb3d?w=421&amp;h=200" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <h1>header in here</h1> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default{} </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>header in here<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span>{} </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>在src目录下的main.js,加入代码:</p> <p><span class="img-wrap"><img data-src="/img/bVbrb3s?w=573&amp;h=230" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import headerTop from &quot;./components/common/header&quot; //引入组件 Vue.component(&quot;head-view&quot;,headerTop); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> headerTop <span class="hljs-keyword">from</span> <span class="hljs-string">"./components/common/header"</span> <span class="hljs-comment">//引入组件</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.component(<span class="hljs-string">"head-view"</span>,headerTop); </code></pre> <p>在要用的页面加入标签&lt;head-view&gt;&lt;/head-view&gt;就会出现内容了</p> <p><span class="img-wrap"><img data-src="/img/bVbrb3y?w=654&amp;h=322" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVbrb3B?w=746&amp;h=296" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>2、局部引用<br />如图,即可</p> <p><span class="img-wrap"><img data-src="/img/bVbrb3Q?w=791&amp;h=540" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_24550.html