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

发布时间：2020-12-16 23:12:20 所属栏目：百科来源：网络整理

导读：vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件一、定义一个组件 1 Aaa= ' 我是标题3 ' Vue.component( 'aaa'span style="color: #000000;",Aaa); /span*span style="color: #000000;"gt;组件里面放数据: data必须是函数的形式，函数必须返

一、定义一个组件

1 Aaa='

我是标题3

'Vue.component('aaa',Aaa);

</span>*<span style="color: #000000;"&gt;组件里面放数据:
    data必须是函数的形式，函数必须返回一个对象(json)

2. 局部组件
放到某个组件内部
var vm=new Vue({
el:'#box',data:{
bSign:true
},components:{ //局部组件
 aaa:Aaa
}
});

1. 全局组件

Document

<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>'#box'<span style="color: #000000;"&gt;
    });

</span></script>

组件里面放数据：

Document

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

Document

另外一种写法，局部

Document

<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>'#box'<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>

方法二：

Document

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!