vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

前端之家收集整理的这篇文章主要介绍了vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

一、定义一个组件

1 Aaa='

我是标题3

'Vue.component('aaa'<span style="color: #000000;">,Aaa);

</span>*<span style="color: #000000;"&gt;组件里面放数据:
    data必须是<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>的形式,<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>必须返回一个对象(json)

2<span style="color: #000000;">. 局部组件
放到某个组件内部
<span style="color: #0000ff;">var vm=<span style="color: #0000ff;">new<span style="color: #000000;"> Vue({
el:'#Box'<span style="color: #000000;">,data:{
bSign:<span style="color: #0000ff;">true<span style="color: #000000;">
},components:{ <span style="color: #008000;">//<span style="color: #008000;">局部组件
<span style="color: #000000;"> aaa:Aaa
}
});

1. 全局组件
<Meta charset="UTF-8"> Document
Box">
<script><br><span style="color: #000000;"&gt;    //另外一种写法,全局
    Vue.component(</span>'my-aaa'<span style="color: #000000;"&gt;,{
        template:</span>'<strong>好</strong>'<span style="color: #000000;"&gt;
    });

    </span><span style="color: #0000ff;"&gt;var</span> vm=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Vue({
        el:</span>'#<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>'<span style="color: #000000;"&gt;
    });

</span></script>

 

组件里面放数据:

<Meta charset="UTF-8"> Document

 

2. 局部组件
放到某个组件内部

<Meta charset="UTF-8"> Document

另外一种写法,局部

<Meta charset="UTF-8"> Document
Box">
<span style="color: #ff0000;"&gt;<script type="x-template" id="aaa"&gt;
    <h2 @click="change"&gt;标题2->{{msg}}</h2>
    <ul>
        <li>1111</li>
        <li>222</li>
        <li>3333</li>
        <li>1111</li>
    </ul>
</script></span>

<script>
    <span style="color: #0000ff;"&gt;var</span> vm=<span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Vue({
        el:</span>'#<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>'<span style="color: #000000;"&gt;,<span style="color: #ff0000;"&gt;template:</span></span><span style="color: #ff0000;"&gt;'#aaa'</span><span style="color: #000000;"&gt;
            }
        }
    });
</span></script>

方法二:

<Meta charset="UTF-8"> Document
Box"> value="aaa组件"> value="bbb组件">

 


























原文链接:https://www.f2er.com/vue/403298.html

猜你在找的Vue相关文章