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>必须返回<a href="https://www.jb51.cc/tag/yige/" 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">

Box">

<script>
    <span style="color: #ff0000;"&gt;var Aaa=Vue.extend({
        template:'<h3>我是<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>3</h3>'
    });

    Vue.component('aaa',Aaa);


    </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;,data:{
            bSign:</span><span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;
        }
    });

</span></script>

<Meta charset="UTF-8">

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">

Box">

 

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

<Meta charset="UTF-8">

Box">

另外一种写法，局部

<Meta charset="UTF-8">

Box">

<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;,components:{
            </span>'my-aaa'<span style="color: #000000;"&gt;:{
                data(){
                    </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; {
                        msg:</span>'welcome vue'<span style="color: #000000;"&gt;
                    }
                },methods:{
                    change(){
                        </span><span style="color: #0000ff;"&gt;this</span>.msg='changed'<span style="color: #000000;"&gt;;
                    }
                },template:</span>'<h2 @click="change"&gt;标题2->{{msg}}</h2>'<span style="color: #000000;"&gt;
            }
        }
    });

</span></script>

 
二、配合模板

1. template:'

{{msg}}

'

2<span style="color: #000000;"&gt;. 单独放到某个地方
    a). </span><script type="x-template" id="aaa"&gt;
        <h2 @click="change"&gt;标题2->{{msg}}</h2>
    </script>
    b). <template id="aaa"&gt;
        <h1><a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>1</h1>
        <ul>
            <li v-<span style="color: #0000ff;"&gt;for</span>="val in arr"&gt;<span style="color: #000000;"&gt;
                {{val}}
            </span></li>
        </ul>
    </template></pre>

方法一：

<Meta charset="UTF-8">

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">

Box">

<span style="color: #ff0000;"&gt;<<strong><span style="color: #800080;"&gt;template</span> </strong>id="aaa"&gt;
    <h1 @click="change"&gt;{{msg}}</h1>
    <ul>
        <li v-for="val in arr"&gt;
            {{val}}
        </li>
    </ul>
</<strong><span style="color: #800080;"&gt;template</span></strong>></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;,components:{
            </span>'my-aaa'<span style="color: #000000;"&gt;:{
                data(){
                    </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; {
                        msg:</span>'welcome vue'<span style="color: #000000;"&gt;,arr:[</span>'apple','banana','orange'<span style="color: #000000;"&gt;]
                    }
                },methods:{
                    change(){
                        </span><span style="color: #0000ff;"&gt;this</span>.msg='changed title'<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">

Box"> value="aaa组件"> value="bbb组件">