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

vue组件学习(下)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p>上次我们说了什么是组件,和它的基本应用,下面我们来看一下我自认为的进阶内容。</p> <h2 id="articleHeader0">子组件控制父组件</h2> <h4>首先写好基本结构,创建一个子组件</h4> <p>&lt;!DOCTYPE html&gt;<br />&lt;html lang="en"&gt;<br />&lt;head&gt;</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="<meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>Document</title>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></pre> <p>&lt;/head&gt;<br />&lt;body&gt;</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=" <div id=&quot;app&quot;> {{text}}<br /> <children></children><br /> <children></children><br /> <children></children> </div> <p><script src=&quot;./../vue.js&quot;></script><br /> <script> var children = { props:[&quot;child&quot;], template:`</p> <div></div> <p>` } var vm = new Vue({ el:&quot;#app&quot;, data:{</p> <p> }, components:{ children } }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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">id</span>=<span class="hljs-string">"app"</span>&gt;</span> {{text}} <span class="hljs-tag">&lt;<span class="hljs-name">children</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">children</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">children</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">children</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">children</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">children</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">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./../vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> children = { <span class="hljs-attr">props</span>:[<span class="hljs-string">"child"</span>], <span class="hljs-attr">template</span>:<span class="hljs-string">`&lt;div&gt;&lt;/div&gt;`</span> } <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ <span class="hljs-attr">el</span>:<span class="hljs-string">"#app"</span>, <span class="hljs-attr">data</span>:{ }, <span class="hljs-attr">components</span>:{ children } }) </span></code></pre> <p>####父元素添加自定义事件</p> <p>html:<br />&lt;children @addNum ="add"&gt;&lt;/children&gt; //这里的名字可以自定义,后面是函数名。</p> <p>js:</p> <p>vm中写入methods且写入函数,并在data中写入数据</p> <p>data:{</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="text:0" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">text:0</code></pre> <p>}</p> <p>methods:{</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="addNum(){ this.text ++; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>addNum(){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.text ++; }</code></pre> <p>}</p> <h4>这里写完大多数初学者会觉得,这有事件,也绑定了,应该就可以了吧。但不要忘了,这是自定义的,会报错的,一般我们会通过子组件去控制它,具体怎么做呢?下面的内容就是重中之重了。</h4> <h4>在我们子组件模板中的元素中写入点击事件</h4> <p>template:<code>&lt;button @click="click"&gt;{{counter}}&lt;/button&gt;</code></p> <h4>为了更好的看下效果我们给子元素也加上数据,通过data函数。</h4> <p>data(){</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="return{ counter }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code><span class="hljs-keyword">return</span>{ counter }</code></pre> <p>}</p> <h4>在methods中添加事件</h4> <p>methods:{</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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="click(){ this.counter ++; // 这里我们为了更好的看到效果。 this.$emit(&quot;addNum&quot;) //这里的$emit是起到触发作用的,也就是说我们想让子组件控制父组件必须用这个属性进行触发。也可以把子组件控制父组件这一过程理解为表单提交,而$emit就是最后的提交。 }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>click(){ <span class="hljs-keyword">this</span>.counter ++; <span class="hljs-comment">// 这里我们为了更好的看到效果。</span> <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">"addNum"</span>) <span class="hljs-comment">//这里的$emit是起到触发作用的,也就是说我们想让子组件控制父组件必须用这个属性进行触发。也可以把子组件控制父组件这一过程理解为表单提交,而$emit就是最后的提交。</span> }</code></pre> <p>}<br />这样就基本完成了子组件控制父组件功能。</p> <h2 id="articleHeader1">插值</h2> <h3 id="articleHeader2">组件还有一个很重要的东西叫做插槽 slot。</h3> <h4>这个标签会把我们在html里的自定义标签里的内容放在自身上来,一般用在模板中,例如</h4> <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> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div id=&quot;app&quot;> <children>1111</children> </div> <p> <script src=&quot;./../vue.js&quot;></script><br /> <script> var children = { template:`</p> <div><slot></slot></div> <p>` //这里就会把我们自定义标签<children></children>里的内容放到slot中,slot标签不会在页面中显示,它只是一个功能标签 } var vm = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:&quot;#app&quot;, data:{</p> <p> }, components:{ children } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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-tag">&lt;<span class="hljs-name">children</span>&gt;</span>1111<span class="hljs-tag">&lt;/<span class="hljs-name">children</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">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./../vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> children = { <span class="hljs-attr">template</span>:<span class="hljs-string">`&lt;div&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;`</span> <span class="hljs-comment">//这里就会把我们自定义标签&lt;children&gt;&lt;/children&gt;里的内容放到slot中,slot标签不会在页面中显示,它只是一个功能标签</span> } <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>:<span class="hljs-string">"#app"</span>, <span class="hljs-attr">data</span>:{ }, <span class="hljs-attr">components</span>:{ children } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>当然我们要注意一种特殊情况,如果我们的自定义标签没有内容,我们可以在slot中加入内容为默认内容,但是如果我们设置了默认内容,而我们的自定义标签也不是空的,那么自定义标签里的内容会替代我们的默认内容。</p> <h3 id="articleHeader3">如果我们的自定义标签不只一条内容,这是我们该怎么办呢?</h3> <h4>这是就用到我们的 slot里name属行了</h4> <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=" <div id=&quot;app&quot;> <children> // 这里我们有多条数据</p> <div slot= &quot;header&quot;>这是头</div> <p> // 这里我们根据name的不同去绑定不同数据</p> <div slot=&quot;footer&quot;>这是尾</div> <p> </children> </div> <p> <script src=&quot;./../vue.js&quot;></script><br /> <script> var children = { template:`</p> <div><slot name=&quot;header&quot;></slot><slot name=&quot;footer&quot;></slot></div> <p>` // 设置不同name } var vm = new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:&quot;#app&quot;, data:{</p> <p> }, components:{ children } }) </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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-tag">&lt;<span class="hljs-name">children</span>&gt;</span> // 这里我们有多条数据 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>= <span class="hljs-string">"header"</span>&gt;</span>这是头<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> // 这里我们根据name的不同去绑定不同数据 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"footer"</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">children</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">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./../vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="xml"> var children = { template:`<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"header"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"footer"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>` // 设置不同name } var vm = new Vue({ el:"#app", data:{ }, components:{ children } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>这样,我们就可以根据name的不同而进行获得不同的数据了</p> <p>vue组件远不止如此,这只是一些较为基础的东西。更多的组件知识我们可以通过官方来进行学习 <a href="https://cn.vuejs.org/v2/guide/components.html" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a></p>

总结

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

vue组件学习(下)

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

vue组件学习(下)

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

80%的人都看过