脚本宝典收集整理的这篇文章主要介绍了Vue组件之全局组件与局部组件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
组件 (component) 是 <a tITle="Vue" href="http://www.js-code.COM/tag/vue" target="_blank" rel="nooPEner">Vue</a>.js 最强大的功能之一。组件可以扩展 <a title="HTML" href="http://www.js-code.com/tag/html" target="_blank" rel="noopener">HTML</a> 元素,封装可重用的代码。在较高层面上,组件是自定义元素,<a title="Vue" href="http://www.js-code.com/tag/vue" target="_blank" rel="noopener">Vue</a>.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 <a title="HTML" href="http://www.js-code.com/tag/html" target="_blank" rel="noopener">HTML</a> 元素的形式,以 is 特性扩展。个人认为就是一个可以重复利用的结构层代码片段。
全局组件注册方式:<a title="Vue" href="http://www.js-code.com/tag/vue" target="_blank" rel="noopener">Vue</a>.component(组件名,{方法})
eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner"><span title="button"><span title="button"><a title="button" href="http://www.js-code.com/tag/button" target="_blank" rel="noopener">button</a>" <a title="class" href="http://www.js-code.com/tag/class" target="_blank" rel="noopener">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a title="top" href="http://www.js-code.com/tag/top" target="_blank" rel="noopener">top</a>" data-clipboard-<a title="text" href="http://www.js-code.com/tag/text" target="_blank" rel="noopener">text</a>="</span></span>
<div id="&quot;app""></div>
<div id=""app1""></div>
<script>
<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component("my-component",{
template:"</p>
<p>
</p>
<h1>我是全局组件</h1>
<p>
</p>
<p>"
});
<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({
el:"#app"
});
<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
el:"#app1"
})
</script>
<span title="button">
" title="" data-orig<a title="in" href="http://www.js-code.com/tag/in" target="_blank" rel="noopener">in</a>al-title="复制"></span>
</div>
</div>
<PRe class="hljs XMl"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
Vue.component(<span class="hljs-string">"my-component"</span>,{
template:<span class="hljs-string">"<h1>我是全局组件</h1>"</span>
});
<span class="hljs-keyword">new</span> Vue({
el:<span class="hljs-string">"#app"</span>
});
<span class="hljs-keyword">new</span> Vue({
el:<span class="hljs-string">"#app1"</span>
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
渲染结果:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner"><span title="button"><span title="button"><a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a title="class" href="http://www.js-code.com/tag/class" target="_blank" rel="noopener">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a title="top" href="http://www.js-code.com/tag/top" target="_blank" rel="noopener">top</a>" data-clipboard-<a title="text" href="http://www.js-code.com/tag/text" target="_blank" rel="noopener">text</a>="</span></span>
<div id=""app"">
<h1>我是全局组件</h1>
</div>
<div id=""app1"">
<h1>我是全局组件</h1>
</div>
" title="" data-orig<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>al-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>我是全局组件<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>我是全局组件<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre>
这里需要注意:
1.全局组件必须写在vue实例创建之前,才在该根元素下面生效;
eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app""></div>
<div id=""app1""></div>
<script>
<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
el: "#app"
});
Vue.component("my-component", {
template: "</p>
<p>
</p>
<h1>我是全局组件</h1>
<p>
</p>
<p>"
});
<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
el: "#app1"
})
</script>
" title="" data-orig<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>al-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app"</span>
});
Vue.component(<span class="hljs-string">"my-component"</span>, {
template: <span class="hljs-string">"<h1>我是全局组件</h1>"</span>
});
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app1"</span>
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
这样只会渲染app1根元素下面的,并不会渲染app根元素下面的,并且会报错。
2.模板里面第一级只能有一个标签,不能并行;
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app""></div>
<script>
<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
el: "#app"
});
Vue.component("my-component", {
template: "</p>
<p>
</p>
<h1>我是全局组件</h1>
<p>
</p>
<p>" +
"</p>
<p>
</p>
<p>我是全局组件内标签</p>
<p>
</p>
<p>"
});
new Vue({
el: "#app1"
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app"</span>
});
Vue.component(<span class="hljs-string">"my-component"</span>, {
template: <span class="hljs-string">"<h1>我是全局组件</h1>"</span> +
<span class="hljs-string">"<p>我是全局组件内标签</p>"</span>
});
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app1"</span>
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
这样子会报错,并且只会渲染第一个标签h1;我们应该这样子写:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app""></div>
<script>
new Vue({
el: "#app"
});
Vue.component("my-component", {
template: "</p>
<p>
</p>
<h1>我是全局组件</p>
<p>
</p>
<p>" +
"我是全局组件内标签</p>
<p>
</h1>
<p>
</p>
<p>"
});
new Vue({
el: "#app1"
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app"</span>
});
Vue.component(<span class="hljs-string">"my-component"</span>, {
template: <span class="hljs-string">"<h1>我是全局组件<p>"</span> +
<span class="hljs-string">"我是全局组件内标签</p></h1>"</span>
});
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app1"</span>
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
局部组件注册方式,直接在Vue实例里面注册
eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
new Vue({
el: "#app1",
components:{
"child-component":{
template:"</p>
<p>
</p>
<h1>我是局部组件</h1>
<p>
</p>
<p>"
}
}
});
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">child-component</span>></span><span class="hljs-tag"></<span class="hljs-name">child-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app1"</span>,
components:{
<span class="hljs-string">"child-component"</span>:{
template:<span class="hljs-string">"<h1>我是局部组件</h1>"</span>
}
}
});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></pre>
局部组件需要注意:
1.属性名为components,s千万别忘了;
2.套路比较深,所以建议模板定义在一个全局变量里,代码看起来容易一点,如下:(模板标签比较多的时候,这样子写更加简洁规整)
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
<a href="http://www.js-code.com/tag/VAR" title="var" target="_blank">var</a> child={
template:"</p>
<p>
</p>
<h1>我是局部组件</h1>
<p>
</p>
<p>"
};
new Vue({
el: "#app1",
components:{
"child-component":child
}
});
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">child-component</span>></span><span class="hljs-tag"></<span class="hljs-name">child-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">var</span> child={
template:<span class="hljs-string">"<h1>我是局部组件</h1>"</span>
};
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app1"</span>,
components:{
<span class="hljs-string">"child-component"</span>:child
}
});
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
关于组件中的其他属性,可以和实例中的一样,但是data属性必须是一个函数:
eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> child={
template:"<button @click='add2'>我是局部组件:{{m2}}</button>",
data:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {m2:1}
},
methods:{
add2:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.m2++
}
}
};
new Vue({
el: "#app1",
components:{
"child-component":child
}
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">child-component</span>></span><span class="hljs-tag"></<span class="hljs-name">child-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
<span class="hljs-keyword">var</span> child={
template:<span class="hljs-string">"<button @click='add2'>我是局部组件:{{m2}}</button>"</span>,
data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">return</span> {m2:<span class="hljs-number">1</span>}
},
methods:{
add2:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">this</span>.m2++
}
}
};
<span class="hljs-keyword">new</span> Vue({
el: <span class="hljs-string">"#app1"</span>,
components:{
<span class="hljs-string">"child-component"</span>:child
}
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
显示结果:
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRD?w=114&h=30" /></span>
全局组件和局部组件一样,data也必须是一个函数:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
Vue.component("my-component",{
template:"<button @click='add1'>全局组件:{{m1}}</button>",
data:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {
m1:10
}
},
methods:{
add1:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.m1++
}
}
});
new Vue({
el:"#app1"
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
Vue.component(<span class="hljs-string">"my-component"</span>,{
template:<span class="hljs-string">"<button @click='add1'>全局组件:{{m1}}</button>"</span>,
data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">return</span> {
m1:<span class="hljs-number">10</span>
}
},
methods:{
add1:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">this</span>.m1++
}
}
});
<span class="hljs-keyword">new</span> Vue({
el:<span class="hljs-string">"#app1"</span>
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
显示结果:
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRI?w=109&h=31" /></span>
当使用 <a title="DOM" href="http://www.js-code.com/tag/dom" target="_blank" rel="noopener">DOM</a> 作为模板时 (例如,将 el 选项挂载到一个已存在的元素上),你会受到 <a title="HTML" href="http://www.js-code.com/tag/html" target="_blank" rel="noopener">HTML</a> 的一些限制,因为 Vue 只有在浏览器解析和标准化 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 后才能获取模板内容。尤其像这些元素 <ul>,<ol>,<table>,<<a title="select" href="http://www.js-code.com/tag/select" target="_blank" rel="noopener">select</a>> 限制了能被它包裹的元素,而一些像<<a title="option" href="http://www.js-code.com/tag/option" target="_blank" rel="noopener">option</a>> 这样的元素只能出现在某些其它元素内部。
自定义组件 <my-row> 被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性:
eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
Vue.component("my-component",{
template:"</p>
<p>
</p>
<h1>{{message}}</h1>
<p>
</p>
<p>",
data:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {
message:"hello world"
}
}
});
new Vue({
el:"#app1"
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"my-component"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
Vue.component(<span class="hljs-string">"my-component"</span>,{
template:<span class="hljs-string">"<h1>{{message}}</h1>"</span>,
data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">return</span> {
message:<span class="hljs-string">"hello world"</span>
}
}
});
<span class="hljs-keyword">new</span> Vue({
el:<span class="hljs-string">"#app1"</span>
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
渲染结果为:
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRK?w=436&h=229" /></span>
对于全局与局部的作用域问题,我们可以这样理解,只要变量是在组件内部用的,这些变量必须是组件内部的,而在外部html结构中引用的变量,都引用的是该挂载下的实例里面的变量
eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
Vue.component("my-component",{
template:"<button @click='add3'>" +
"{{message}}</button>",
data:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {
message:"hello world"
}
},
methods:{
add3:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>("我是局部")
}
}
});
new Vue({
el:"#app1",
methods:{
add3:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>("我是全局")
}
}
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
Vue.component(<span class="hljs-string">"my-component"</span>,{
template:<span class="hljs-string">"<button @click='add3'>"</span> +
<span class="hljs-string">"{{message}}</button>"</span>,
data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">return</span> {
message:<span class="hljs-string">"hello world"</span>
}
},
methods:{
add3:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
alert(<span class="hljs-string">"我是局部"</span>)
}
}
});
<span class="hljs-keyword">new</span> Vue({
el:<span class="hljs-string">"#app1"</span>,
methods:{
add3:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
alert(<span class="hljs-string">"我是全局"</span>)
}
}
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
弹出框显示:我是局部
Vue中所谓的全局指的是该挂载下的区域;
下面这种做法是错误的,按我的想法觉得应该会弹出:我是全局,但是却报错,也就是说组件处于全局下不可以添加默认事件,要用全局的事件函数,必须父子通信
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""></div>
<script>
Vue.component("my-component",{
template:"<button @click='add3'>" +
"{{message}}</button>",
data:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> {
message:"hello world"
}
}
});
new Vue({
el:"#app1",
methods:{
add3:<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){
<a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>("我是全局")
}
}
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">my-component</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add3"</span>></span><span class="hljs-tag"></<span class="hljs-name">my-component</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
Vue.component(<span class="hljs-string">"my-component"</span>,{
template:<span class="hljs-string">"<button @click='add3'>"</span> +
<span class="hljs-string">"{{message}}</button>"</span>,
data:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
<span class="hljs-keyword">return</span> {
message:<span class="hljs-string">"hello world"</span>
}
}
});
<span class="hljs-keyword">new</span> Vue({
el:<span class="hljs-string">"#app1"</span>,
methods:{
add3:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
alert(<span class="hljs-string">"我是全局"</span>)
}
}
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
额外话题:
1.函数<a title="return" href="http://www.js-code.com/tag/return" target="_blank" rel="noopener">return</a>后面必须跟返回的内容,不能换行写
eg:
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRP?w=152&h=110" /></span>
下面这种写法不会返值回来:
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRQ?w=149&h=78" /></span>
2.Vue和小程序等一样,采用<a title="es6" href="http://www.js-code.com/tag/es6" target="_blank" rel="noopener">es6</a>的函数写法,<a title="this" href="http://www.js-code.com/tag/this" target="_blank" rel="noopener">this</a>指向是不一样的
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id=""app1""><button>ES5</button>
<button>ES6</button></div>
<script>
new Vue({
el:"#app1",
methods:{
f:function(){
console.LOG(this)
},
F1:()=>{
console.log(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>)
}
}
})
</script>
" title="" data-original-title="复制">
</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"f"</span>></span>ES5<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"f1"</span>></span>ES6<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-keyword">new</span> Vue({
<span class="hljs-attr">el</span>:<span class="hljs-string">"#app1"</span>,
<span class="hljs-attr">methods</span>:{
<span class="hljs-attr">f</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>)
},
<span class="hljs-attr">f1</span>:<span class="hljs-function"><span class="hljs-params">()</span>=></span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>)
}
}
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
</code></pre>
结果:
第一个<a title="this" href="http://www.js-code.com/tag/this" target="_blank" rel="noopener">this</a>指的是Vue实例
第二个<a title="this" href="http://www.js-code.com/tag/this" target="_blank" rel="noopener">this</a>指的是W<a title="in" href="http://www.js-code.com/tag/in" target="_blank" rel="noopener">in</a><a title="do" href="http://www.js-code.com/tag/do" target="_blank" rel="noopener">do</a>w
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRS?w=817&h=54" /></span>
由于它和小程序不一样,我发现在data里面<a title="this" href="http://www.js-code.com/tag/this" target="_blank" rel="noopener">this</a>指的是<a title="window" href="http://www.js-code.com/tag/window" target="_blank" rel="noopener">window</a>,在methods里面<a title="this" href="http://www.js-code.com/tag/this" target="_blank" rel="noopener">this</a>才是Vue实例
所以建议大家用<a title="es5" href="http://www.js-code.com/tag/es5" target="_blank" rel="noopener">es5</a>写吧
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner"></div>
</div>
<pre class="hljs css"><code><span class="hljs-selector-tag">new</span> <span class="hljs-selector-tag">Vue</span>({
<span class="hljs-attribute">el</span>:<span class="hljs-string">"#app1"</span>,
data:{that:this},
})
</code></pre>
<span class="img-wrap"><img style="cursor: pointer;" title="clipboard.png" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" data-src="/img/bVWgRT?w=593&h=154" /></span>
<a href="http://www.cnblogs.com/douyaer/p/7637093.html" target="_blank" rel="nofollow noopener noreferrer">博文地址:</a><a href="http://www.cnblogs.com/douyaer/p/7637093.html" target="_blank" rel="nofollow noopener noreferrer">http://www.cnblogs.com/douyae...</a>
以上是脚本宝典为你收集整理的Vue组件之全局组件与局部组件全部内容,希望文章能够帮你解决Vue组件之全局组件与局部组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。