脚本宝典收集整理的这篇文章主要介绍了

详解vue全局组件与局部组件使用方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。<br /><span class="img-wrap"><img data-src="/img/remote/1460000017285207" src="/img/remote/1460000017285207" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <p>vue全局/局部注册,以及一些混淆的组件<br />main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于&lt;<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a> class=wraper&gt;&lt;/<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>&gt;</p> <p><strong>—main.js文件</strong></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="**main.js入口文件的内容** import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> from 'vue'<br /> import App from './App'<br /> import router from './router'<br /> // 引入公用组件的vue文件 他暴漏的是一个对象<br /> import cpublic from './components/public'</p> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.config.productionTip = false</p> <p>// 注册全局组件-要在vue的根事咧之前<br /> // 参数 1是标签名字-string 2是对象 引入外部vue文件就相当与一个对象<br /> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.component('public', cpublic)<br /> // 正常注册全局组件的时候,第二个参数应该是对象。<br /> Vue.component('public1', {<br /> template: '</p> <div>正常的组件模式</div> <p>'<br /> })<br /> /* eslint-disable no-new */<br /> // 生成vue 的根实例;创建每个组件都会生成一个vue的事咧<br /> new Vue({<br /> el: '#app',<br /> router,<br /> template: '<App></App>',<br /> components: { App }<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>**main.js入口文件的内容** <span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-comment">// 引入公用组件的vue文件 他暴漏的是一个对象</span> <span class="hljs-keyword">import</span> cpublic <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/public'</span> Vue.config.productionTip = <span class="hljs-literal">false</span> <span class="hljs-comment">// 注册全局组件-要在vue的根事咧之前</span> <span class="hljs-comment">// 参数 1是标签名字-string 2是对象 引入外部vue文件就相当与一个对象</span> Vue.component(<span class="hljs-string">'public'</span>, cpublic) <span class="hljs-comment">// 正常注册全局组件的时候,第二个参数应该是对象。</span> Vue.component(<span class="hljs-string">'public1'</span>, { template: <span class="hljs-string">'&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;正常的组件模式&lt;/div&gt;'</span> }) <span class="hljs-comment">/* eslint-disable no-new */</span> <span class="hljs-comment">// 生成vue 的根实例;创建每个组件都会生成一个vue的事咧</span> <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, router, template: <span class="hljs-string">'&lt;App/&gt;'</span>, components: { App } })</code></pre> <p><strong>—public.vue</strong> 组件为定义的全局组件在任何组件里都可以直接使用,不需要在vue实例选项components上在次定义,也不需要再次导入文件路径。</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="**public.vue的组件内容** <template lang=&quot;pug&quot;><br /> .wrapper<br /> slot(text=&quot;我是全局组件&quot;) {{name}}<br /> </template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'HelloWor', // 全局组件里data属性必须是函数,这样才会独立, // 在组件改变状态的时候不会影响其他组件里公用的这个状态 data () { return { name: '我是全局组件' }//欢迎加入前端全栈开发交流圈一起学习交流:864305860 }//面向1-3年前端人员 }//帮助突破技术瓶颈,提升思维能力</p> <p></script> </p> <style scoped> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>**public.vue的组件内容** <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"pug"</span>&gt;</span> .wrapper slot(text="我是全局组件") {{name}} <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 class="hljs-attr">name</span>: <span class="hljs-string">'HelloWor'</span>, <span class="hljs-comment">// 全局组件里data属性必须是函数,这样才会独立,</span> <span class="hljs-comment">// 在组件改变状态的时候不会影响其他组件里公用的这个状态</span> data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'我是全局组件'</span> }<span class="hljs-comment">//欢迎加入前端全栈开发交流圈一起学习交流:864305860</span> }<span class="hljs-comment">//面向1-3年前端人员</span> }<span class="hljs-comment">//帮助突破技术瓶颈,提升思维能力</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>在<strong>parent.vue</strong>组件里,用到了public全局组件以及其他的子组件</p> <p><strong>parent.vue组件</strong></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 lang=&quot;pug&quot;><br /> .wrap<br /> .input-hd<br /> .title 名称:<br /> input.input(type=&quot;text&quot;,v-model=&quot;msg&quot;,placeholder=&quot;请输入正确的值&quot;,style=&quot;outline:none;&quot;)<br /> .content-detail<br /> .content-name 我是父组件的内容<br /> children(:msg='msg', number='1')<br /> public<br /> router-link(to='/parent/children2') 第二个子组件<br /> router-view<br /> </template></p> <p><script> import children from './children' // children(:msg='msg', number='1')在组件里 也可以传递自定义的属性,但是是字符串类型,</p> <p><a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'HelloWor', data () { return { // 通过prop将数据传递到子组件,并与v-model想对应的输入框相互绑定。 msg: '这个是父组件的-prop-数据' } }, components: { children } } </script></p> <style scoped> .wrap { } .input-hd { display: <a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a>; <a href="http://www.js-code.com/tag/flex" title="flex" target="_blank">flex</a>-direction: row; align-items: center; height: 70px; }//欢迎加入前端全栈开发交流圈一起学习交流:864305860 </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>&lt;template lang=<span class="hljs-string">"pug"</span>&gt; .<span class="hljs-built_in">wrap</span> .<span class="hljs-built_in">input</span>-hd .title 名称: <span class="hljs-built_in">input</span>.<span class="hljs-built_in">input</span>(<span class="hljs-built_in">type</span>=<span class="hljs-string">"text"</span>,v-model=<span class="hljs-string">"msg"</span>,placeholder=<span class="hljs-string">"请输入正确的值"</span>,style=<span class="hljs-string">"outline:none;"</span>) .content-detail .content-name 我是父组件的内容 children(:msg=<span class="hljs-string">'msg'</span>, number=<span class="hljs-string">'1'</span>) public router-link(to=<span class="hljs-string">'/parent/children2'</span>) 第二个子组件 router-view &lt;/template&gt; &lt;script&gt; import children from <span class="hljs-string">'./children'</span> // children(:msg=<span class="hljs-string">'msg'</span>, number=<span class="hljs-string">'1'</span>)在组件里 也可以传递自定义的属性,但是是字符串类型, export default { name: <span class="hljs-string">'HelloWor'</span>, data () { <span class="hljs-keyword">return</span> { // 通过prop将数据传递到子组件,并与v-model想对应的输入框相互绑定。 msg: <span class="hljs-string">'这个是父组件的-prop-数据'</span> } }, components: { children } } &lt;/script&gt; &lt;style scoped&gt; .<span class="hljs-built_in">wrap</span> { } .<span class="hljs-built_in">input</span>-hd { display: <a href="http://www.js-code.com/tag/flex" title="浏览关于“flex”的文章" target="_blank" class="tag_link">flex</a>; flex-direction: row; align-items: center; height: <span class="hljs-number">70</span>px; }//欢迎加入前端全栈开发交流圈一起学习交流:<span class="hljs-number">864305860</span> &lt;/style&gt;</code></pre> <p><strong>children.vue</strong>是parent.vue的子组件,但是只在parent.vue作用域里可用</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 lang=&quot;pug&quot;><br /> .wrapper<br /> slot(text=&quot;我是子组件的text&quot;) 我是子组件的内容<br /> .name {{ msg }} {{ number }}<br /> </template></p> <p><script> export default { name: 'HelloWor', // 接受的时候是用props接受,<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>的形式,里面是字符串的形式。 // 也可以传入普通的字符串 // 在子组件中,props接受到的状态当作vue的实例属性来使用 props: [ 'msg', 'number' ] } </script><br /> //欢迎加入前端全栈开发交流圈一起学习交流:864305860</p> <style scoped> //帮助突破技术瓶颈,提升思维能力 </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"pug"</span>&gt;</span> .wrapper slot(text="我是子组件的text") 我是子组件的内容 .name {{ msg }} {{ number }} <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">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'HelloWor'</span>, <span class="hljs-comment">// 接受的时候是用props接受,<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>的形式,里面是字符串的形式。</span> <span class="hljs-comment">// 也可以传入普通的字符串</span> <span class="hljs-comment">// 在子组件中,props接受到的状态当作vue的实例属性来使用</span> props: [ <span class="hljs-string">'msg'</span>, <span class="hljs-string">'number'</span> ] } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> //欢迎加入前端全栈开发交流圈一起学习交流:864305860 <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> //帮助突破技术瓶颈,提升思维能力 </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p><strong>结语</strong></p> <p>感谢您的观看,如有不足之处,欢迎批评指正。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

详解vue全局组件与局部组件使用方法

全部内容,希望文章能够帮你解决

详解vue全局组件与局部组件使用方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过