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

vue2.0学习笔记(六):深刻理解Vue中的组件(1)–基础篇

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote><p> <a href="https://github.com/zhanglingning/vue-iv2" rel="nofollow noreferrer" target="_blank">深刻理解Vue中的组件(1)--基础篇github链接</a> (demo04持续更新中)</p></blockquote> <p><strong>什么是组件?</strong><br />组件 (Component) 是 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js 最强大的功能之一。组件可以扩展 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 元素,封装可重用的代码<br />在<em>vue-cli</em>中简单的理解。vue组件就是一个 .vue 文件,里面包含<em>&lt;template&gt;</em> <em>&lt;script&gt;</em><em>&lt;style&gt;</em>。<br />如下就是一个简单的组件,我们又称之为单文件组件。</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 class=&quot;hello&quot;> <h2>{{msg}}</h2> </p></div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: &quot;Demo04&quot;, data() { return { msg: &quot;demo04 -- 深刻理解<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>中的组件&quot; }; }, created() { console.log(&quot;实例创建完成&quot;); }, mounted: function() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$nextTick(function() {</p> <p> }); }, methods: { _handleClick() {</p> <p> } } }; </script></p> <style scoped lang=&quot;less&quot;> .hello { height: 200px; h2 { background: #dcdc3e; } } </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>&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> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</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 class="hljs-attr">name</span>: <span class="hljs-string">"Demo04"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"demo04 -- 深刻理解<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>中的组件"</span> }; }, created() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"实例创建完成"</span>); }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$nextTick(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ }); }, <span class="hljs-attr">methods</span>: { _handleClick() { } } }; </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> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span>&gt;</span><span class="undefined"> .hello { height: 200px; h2 { background: #dcdc3e; } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p><strong>使用组件</strong></p> <ol> <li> <p>全局组册</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="如我们在文件夹中编写一个Header.vue组件,并在main.js中引入,注册为全局组件 //在main,js中引入组件Header,并组册为全局组件 import Header from './assets/header/header.vue'; Vue.component('Header',Header) --------------------------------------- 在damo04.vue渲染Header组件 <template></p> <div class=&quot;hello&quot;> <Header></Header></p> <h2>{{msg}}</h2> </p></div> <p> </template></p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>如我们在文件夹中编写一个Header.vue组件,并在main.js中引入,注册为全局组件 //在main,js中引入组件Header,并组册为全局组件 import Header from './assets/header/header.vue'; Vue.component('Header',Header) --------------------------------------- 在damo04.vue渲染Header组件 <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Header</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</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> </code></pre> </li> <li> <p>局部组册</p> <p>你不必把每个组件都注册到全局。<br /> 你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件:<br /> 如app.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></p> <div id=&quot;app&quot;> <!--第三步 在template 中渲染组件--><br /> <!-- <Demo01></Demo01> <hr> <Demo02></Demo02> <hr> <Demo03></Demo03> <hr> --><br /> <Demo04></Demo04> </div> <p> </template></p> <p> <script> //第一步 引入Demo01 组件 import Demo01 from './components/demo01/demo01' import Demo02 from './components/demo02/demo02' import Demo03 from './components/demo03/demo03' import Demo04 from './components/demo04/demo04' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'App', //第二步 在components 中注册组件 components: { Demo01, Demo02, Demo03, Demo04, } } </script></p> <style> </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>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-comment">&lt;!--第三步 在template 中渲染组件--&gt;</span> <span class="hljs-comment">&lt;!-- &lt;Demo01/&gt; &lt;hr&gt; &lt;Demo02/&gt; &lt;hr&gt; &lt;Demo03/&gt; &lt;hr&gt; --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Demo04</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-comment">//第一步 引入Demo01 组件</span> <span class="hljs-keyword">import</span> Demo01 <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/demo01/demo01'</span> <span class="hljs-keyword">import</span> Demo02 <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/demo02/demo02'</span> <span class="hljs-keyword">import</span> Demo03 <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/demo03/demo03'</span> <span class="hljs-keyword">import</span> Demo04 <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/demo04/demo04'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'App'</span>, <span class="hljs-comment">//第二步 在components 中注册组件</span> components: { Demo01, Demo02, Demo03, Demo04, } } </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>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> </li> </ol> <p><strong>组件组合</strong></p> <p>组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。然而,通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解,从而提高了其可维护性和复用性。</p> <p>在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 <em>prop</em> 给子组件下发数据,子组件通过<em>事件</em>给父组件发送消息。看看它们是怎么工作的。</p> <blockquote><p>父组件demo04源码</p></blockquote> <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 class=&quot;hello&quot;> <Header></Header></p> <h2>{{msg}}</h2> <p> <!--父组件通过message向子组件传递数据--><br /> <!--子组件数据通过sendCount传递过来,父组件通过_handleCount()方法接受--><br /> <submit-com message=&quot;hello!&quot; @sendCount=&quot;_handleCount&quot;></submit-com> </div> <p></template></p> <p><script> import submitCom from './children/submit'</p> <p> export default { name: &quot;Demo01&quot;, data() { return { msg: &quot;demo04 -- 深刻理解Vue中的组件&quot;, topic:&quot;hello&quot; }; }, created() { console.log(&quot;实例创建完成&quot;); }, mounted: function() { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$nextTick(function() {</p> <p> }); }, components: { submitCom }, methods: { _handleClick() { console.log(111); }, //接受子组件传递的数据,并打印 _handleCount(data){ console.log(data); } } }; </script></p> <style scoped lang=&quot;less&quot;> .hello { height: 200px; h2 { background: #dcdc3e; } } </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>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Header</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>{{msg}}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-comment">&lt;!--父组件通过message向子组件传递数据--&gt;</span> <span class="hljs-comment">&lt;!--子组件数据通过sendCount传递过来,父组件通过_handleCount()方法接受--&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">submit-com</span> <span class="hljs-attr">message</span>=<span class="hljs-string">"hello!"</span> @<span class="hljs-attr">sendCount</span>=<span class="hljs-string">"_handleCount"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">submit-com</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">import</span> submitCom <span class="hljs-keyword">from</span> <span class="hljs-string">'./children/submit'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"Demo01"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"demo04 -- 深刻理解Vue中的组件"</span>, <span class="hljs-attr">topic</span>:<span class="hljs-string">"hello"</span> }; }, created() { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"实例创建完成"</span>); }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ }); }, <span class="hljs-attr">components</span>: { submitCom }, <span class="hljs-attr">methods</span>: { _handleClick() { <span class="hljs-built_in">console</span>.log(<span class="hljs-number">111</span>); }, <span class="hljs-comment">//接受子组件传递的数据,并打印</span> _handleCount(data){ <span class="hljs-built_in">console</span>.log(data); } } }; </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> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span>&gt;</span><span class="undefined"> .hello { height: 200px; h2 { background: #dcdc3e; } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <blockquote><p>子组件submit源码</p></blockquote> <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 class=&quot;hello&quot;> {{msg}}</p> <p> {{message}}<br /> {{count}}<br /> <el-button round @click=&quot;_handleClick()&quot;>圆角按钮</el-button> </div> <p></template></p> <p><script> export default { name: &quot;Demo01&quot;, data() { return { msg: &quot;submit组件&quot;, count:0 }; }, // 通过props从父组件中接受数据,变成组件内部数据 props:[&quot;message&quot;], created() { }, mounted: function() { this.$nextTick(function() {</p> <p> }); }, comments: { }, methods: { _handleClick() { this.count++; //向父组件传递数据 count this.$emit('sendCount', this.count) } } }; </script></p> <style scoped lang=&quot;less&quot;> .hello { height: 200px; h2 { background: #dcdc3e; } } </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>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hello"</span>&gt;</span> {{msg}} {{message}} {{count}} <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> <span class="hljs-attr">round</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"_handleClick()"</span>&gt;</span>圆角按钮<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</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">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">"Demo01"</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">msg</span>: <span class="hljs-string">"submit组件"</span>, <span class="hljs-attr">count</span>:<span class="hljs-number">0</span> }; }, <span class="hljs-comment">// 通过props从父组件中接受数据,变成组件内部数据</span> props:[<span class="hljs-string">"message"</span>], created() { }, <span class="hljs-attr">mounted</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ }); }, <span class="hljs-attr">comments</span>: { }, <span class="hljs-attr">methods</span>: { _handleClick() { <span class="hljs-keyword">this</span>.count++; <span class="hljs-comment">//向父组件传递数据 count</span> <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'sendCount'</span>, <span class="hljs-keyword">this</span>.count) } } }; </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> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span>&gt;</span><span class="undefined"> .hello { height: 200px; h2 { background: #dcdc3e; } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p></code></p>

总结

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

vue2.0学习笔记(六):深刻理解Vue中的组件(1)–基础篇

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

vue2.0学习笔记(六):深刻理解Vue中的组件(1)–基础篇

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

80%的人都看过