Vue组件之全局组件与局部组件

发布时间:2019-08-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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="&amp;quot;app&quot;"></div>
<div id="&quot;app1&quot;"></div>
<script>
<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.component(&quot;my-component&quot;,{
    template:&quot;</p>
<p>
</p>
<h1>我是全局组件</h1>
<p>
</p>
<p>&quot;
});
<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:&quot;#app&quot;
});
<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
    el:&quot;#app1&quot;
})
</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="复制"&gt;</span>

</div>
</div>
<PRe class="hljs XMl"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</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-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</span><span class="actionscript">
Vue.component(<span class="hljs-string">"my-component"</span>,{
    template:<span class="hljs-string">"&lt;h1&gt;我是全局组件&lt;/h1&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</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="&quot;app&quot;">
<h1>我是全局组件</h1>
</div>
<div id="&quot;app1&quot;">
<h1>我是全局组件</h1>
</div>
" title="" data-orig<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>al-title="复制"&gt;

</div>
</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">h1</span>&gt;</span>我是全局组件<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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>我是全局组件<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>
</code></pre>
这里需要注意:

1.全局组件必须写在vue实例创建之前,才在该根元素下面生效;

eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app&quot;"></div>
<div id="&quot;app1&quot;"></div>
<script>
    <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
        el: &quot;#app&quot;
    });
    Vue.component(&quot;my-component&quot;, {
        template: &quot;</p>
<p>
</p>
<h1>我是全局组件</h1>
<p>
</p>
<p>&quot;
    });
    <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
        el: &quot;#app1&quot;
    })
</script>

" title="" data-orig<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>al-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</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-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</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">"&lt;h1&gt;我是全局组件&lt;/h1&gt;"</span>
    });
    <span class="hljs-keyword">new</span> Vue({
        el: <span class="hljs-string">"#app1"</span>
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
这样只会渲染app1根元素下面的,并不会渲染app根元素下面的,并且会报错。

2.模板里面第一级只能有一个标签,不能并行;
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app&quot;"></div>
<script>
    <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Vue({
        el: &quot;#app&quot;
    });
    Vue.component(&quot;my-component&quot;, {
        template: &quot;</p>
<p>
</p>
<h1>我是全局组件</h1>
<p>
</p>
<p>&quot; +
        &quot;</p>
<p>
</p>
<p>我是全局组件内标签</p>
<p>
</p>
<p>&quot;
    });
    new Vue({
        el: &quot;#app1&quot;
    })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</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-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</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">"&lt;h1&gt;我是全局组件&lt;/h1&gt;"</span> +
        <span class="hljs-string">"&lt;p&gt;我是全局组件内标签&lt;/p&gt;"</span>
    });
    <span class="hljs-keyword">new</span> Vue({
        el: <span class="hljs-string">"#app1"</span>
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
这样子会报错,并且只会渲染第一个标签h1;我们应该这样子写:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app&quot;"></div>
<script>
    new Vue({
        el: &quot;#app&quot;
    });
    Vue.component(&quot;my-component&quot;, {
        template: &quot;</p>
<p>
</p>
<h1>我是全局组件</p>
<p>
</p>
<p>&quot; +
        &quot;我是全局组件内标签</p>
<p>
</h1>
<p>
</p>
<p>&quot;
    });
    new Vue({
        el: &quot;#app1&quot;
    })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</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-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</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">"&lt;h1&gt;我是全局组件&lt;p&gt;"</span> +
        <span class="hljs-string">"我是全局组件内标签&lt;/p&gt;&lt;/h1&gt;"</span>
    });
    <span class="hljs-keyword">new</span> Vue({
        el: <span class="hljs-string">"#app1"</span>
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
局部组件注册方式,直接在Vue实例里面注册

eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
    new Vue({
        el: &quot;#app1&quot;,
        components:{
            &quot;child-component&quot;:{
                template:&quot;</p>
<p>
</p>
<h1>我是局部组件</h1>
<p>
</p>
<p>&quot;
            }
        }
    });
</script>
" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-component</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>&gt;</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">"&lt;h1&gt;我是局部组件&lt;/h1&gt;"</span>
            }
        }
    });
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
局部组件需要注意:

1.属性名为components,s千万别忘了;

2.套路比较深,所以建议模板定义在一个全局变量里,代码看起来容易一点,如下:(模板标签比较多的时候,这样子写更加简洁规整)
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
    <a href="http://www.js-code.com/tag/VAR" title="var" target="_blank">var</a> child={
        template:&quot;</p>
<p>
</p>
<h1>我是局部组件</h1>
<p>
</p>
<p>&quot;
    };
    new Vue({
        el: &quot;#app1&quot;,
        components:{
            &quot;child-component&quot;:child
        }
    });
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-component</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>&gt;</span><span class="actionscript">
    <span class="hljs-keyword">var</span> child={
        template:<span class="hljs-string">"&lt;h1&gt;我是局部组件&lt;/h1&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
关于组件中的其他属性,可以和实例中的一样,但是data属性必须是一个函数:

eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
    <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> child={
        template:&quot;<button @click='add2'>我是局部组件:{{m2}}</button>&quot;,
        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: &quot;#app1&quot;,
        components:{
            &quot;child-component&quot;:child
        }
    })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">child-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">child-component</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>&gt;</span><span class="actionscript">
    <span class="hljs-keyword">var</span> child={
        template:<span class="hljs-string">"&lt;button @click='add2'&gt;我是局部组件:{{m2}}&lt;/button&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</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&amp;h=30" /></span>

全局组件和局部组件一样,data也必须是一个函数:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
    Vue.component(&quot;my-component&quot;,{
        template:&quot;<button @click='add1'>全局组件:{{m1}}</button>&quot;,
        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:&quot;#app1&quot;
    })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</span><span class="actionscript">
    Vue.component(<span class="hljs-string">"my-component"</span>,{
        template:<span class="hljs-string">"&lt;button @click='add1'&gt;全局组件:{{m1}}&lt;/button&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</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&amp;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> 后才能获取模板内容。尤其像这些元素 &lt;ul&gt;,&lt;ol&gt;,&lt;table&gt;,&lt;<a title="select" href="http://www.js-code.com/tag/select" target="_blank" rel="noopener">select</a>&gt; 限制了能被它包裹的元素,而一些像&lt;<a title="option" href="http://www.js-code.com/tag/option" target="_blank" rel="noopener">option</a>&gt; 这样的元素只能出现在某些其它元素内部。

自定义组件 &lt;my-row&gt; 被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性:

eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
 Vue.component(&quot;my-component&quot;,{
     template:&quot;</p>
<p>
</p>
<h1>{{message}}</h1>
<p>
</p>
<p>&quot;,
     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:&quot;hello world&quot;
         }
     }
 });
 new Vue({
     el:&quot;#app1&quot;
 })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">is</span>=<span class="hljs-string">"my-component"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</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>&gt;</span><span class="actionscript">
 Vue.component(<span class="hljs-string">"my-component"</span>,{
     template:<span class="hljs-string">"&lt;h1&gt;{{message}}&lt;/h1&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</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&amp;h=229" /></span>

对于全局与局部的作用域问题,我们可以这样理解,只要变量是在组件内部用的,这些变量必须是组件内部的,而在外部html结构中引用的变量,都引用的是该挂载下的实例里面的变量

eg:
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
 Vue.component(&quot;my-component&quot;,{
     template:&quot;<button @click='add3'>&quot; +
     &quot;{{message}}</button>&quot;,
     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:&quot;hello world&quot;
         }
     },
     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>(&quot;我是局部&quot;)
         }
     }
 });
 new Vue({
     el:&quot;#app1&quot;,
     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>(&quot;我是全局&quot;)
         }
     }
 })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">my-component</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</span><span class="actionscript">
 Vue.component(<span class="hljs-string">"my-component"</span>,{
     template:<span class="hljs-string">"&lt;button @click='add3'&gt;"</span> +
     <span class="hljs-string">"{{message}}&lt;/button&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
</code></pre>
弹出框显示:我是局部

Vue中所谓的全局指的是该挂载下的区域;

下面这种做法是错误的,按我的想法觉得应该会弹出:我是全局,但是却报错,也就是说组件处于全局下不可以添加默认事件,要用全局的事件函数,必须父子通信
<div class="widget-codetool" style="display: none;">
<div class="widget-codetool--inner">
<div id="&quot;app1&quot;"></div>
<script>
 Vue.component(&quot;my-component&quot;,{
     template:&quot;<button @click='add3'>&quot; +
     &quot;{{message}}</button>&quot;,
     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:&quot;hello world&quot;
         }
     }
 });
 new Vue({
     el:&quot;#app1&quot;,
     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>(&quot;我是全局&quot;)
         }
     }
 })
</script>

" title="" data-original-title="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">my-component</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"add3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">my-component</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>&gt;</span><span class="actionscript">
 Vue.component(<span class="hljs-string">"my-component"</span>,{
     template:<span class="hljs-string">"&lt;button @click='add3'&gt;"</span> +
     <span class="hljs-string">"{{message}}&lt;/button&gt;"</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">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</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&amp;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&amp;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="&quot;app1&quot;"><button>ES5</button>
<button>ES6</button></div>
<script>
new Vue({
    el:&quot;#app1&quot;,
    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="复制"&gt;

</div>
</div>
<pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app1"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"f"</span>&gt;</span>ES5<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"f1"</span>&gt;</span>ES6<span class="hljs-tag">&lt;/<span class="hljs-name">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">script</span>&gt;</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>=&gt;</span>{
            <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>)
        }
    }
})
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</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&amp;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&amp;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>

&nbsp;
 

脚本宝典总结

以上是脚本宝典为你收集整理的Vue组件之全局组件与局部组件全部内容,希望文章能够帮你解决Vue组件之全局组件与局部组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。