vue--组件

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

导读：vue的组件什么是组件：说白了，就是自定义标签。 vue为什么有组件的概念：不止是vue，目前流行的框架都有组件这个概念，比如angular中的自定义指令，其实就是组件。怎么使用组件：使用组件之前，先要创建一个组件 MyComponent = }) 然后是注册组件需要用V

　　　　vue的组件

　　　　　　什么是组件：说白了，就是自定义标签。

　　　　　　vue为什么有组件的概念：不止是vue，目前流行的框架都有组件这个概念，比如angular中的自定义指令，其实就是组件。

　　　　　　怎么使用组件：使用组件之前，先要创建一个组件

MyComponent = })

　　　　　　然后是注册组件

　　　　　　需要用Vue.component(tag,constructor)?注册?

Vue.component('my-component',MyComponent)

　　　　　　组件在注册之后，便可以在父实例的模块中以自定义元素??的形式使用。要确保在初始化根实例之前注册了组件：

MyComponent ='

A custom component!

' Vue.component('my-component' '#example'

?　　当然，这样写还是有些累，好在Vue给我们提供了注册组件的“语法糖”?

Document

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;explane</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;explane</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</body>
<script src="../js/vue.js"></script>
<script>

Vue.component(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;explane</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,{
    template:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;<p>this is firest component</p></span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;
});
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Vue({
    el:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;#app</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;
})

</script>
</html>

　　在chrome中显示：

　　这种写法Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。使用这种方式，Vue在背后会自动地调用Vue.extend()。

　　调用Vue.component()注册组件时[实际上是在vue的prototype对象里添加component()]，注册的组件是全局的。这意味着该组件在任意Vue实例都可以使用，如果不需要全局注册，或者是让组件使用在其它组件[组件的嵌套]内，可以用选项对象的components属性实现局部注册。

Document 第一个组件

第二个组件

</script>
</html>

在chrome中显示：

　　　　尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

　　　　第一种：使用script标签

Document

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;new</span><span style="background-color: #f5f5f5; color: #000000"&gt; Vue({
    el:</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#app</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;
})

</script>
</html>

　　在chrome中显示：

　　　　template选项现在不再是HTML元素，而是一个id，Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译。

注意：使用