Vue2学习笔记:组件（Component）

来源：互联网发布：小漠鞋子淘宝店编辑：程序博客网时间：2024/05/22 12:05

组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。

1. 全局 Vue.component(tagName, options)

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script src="http://unpkg.com/vue/dist/vue.js"></script>    <!-- // <script src="vue.js"></script> --></head><body>     <div id="box">        <test></test>    </div>    <script type="text/javascript">        //注册        Vue.component('test', {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的组件'}            },            methods:{                change:function(){                    //todo                    console.log(this);                }            }        });        //创建根实例        var vm = new Vue({            el:'#box',        });    </script></body></html>

2. 局部注册

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script src="vue.js"></script></head><body>     <div id="box">        <test></test>    </div>    <script type="text/javascript">        ///定义组件        var testTemplate = {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的局部组件'}            },            methods:{                change:function(){                     //todo                    console.log(this);                }            }        };        //创建根实例        var vm = new Vue({            el:'#box',            components:{                'test': testTemplate            }        });    </script></body></html>

3. 动态切换组件

首先这样用法，这样指定组件，下面有两个我们指定其中的一个

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script src="vue.js"></script></head><body>     <div id="box">        <components :is="testTemplate"></components>    </div>    <script type="text/javascript">        ///定义组件        var testTemplate = {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的局部组件1'}            },            methods:{                change:function(){                     //todo                    console.log(this);                }            }        };        //创建根实例          var vm = new Vue({            el:'#box'        });    </script></body></html>

下面有两个我们指定其中的一个

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script src="vue.js"></script></head><body>     <div id="box">        <input type="button" value="1" @click="a='testTemplate'">        <input type="button" value="2" @click="a='testTemplate2'">        <components :is="a"></components>    </div>    <script type="text/javascript">        ///定义组件        var testTemplate = {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的局部组件1'}            },            methods:{                change:function(){                     //todo                    console.log(this);                }            }        };        var testTemplate2 = {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的局部组件2'}            },            methods:{                change:function(){                     //todo                    console.log(this);                }            }        };        //创建根实例          var vm = new Vue({            el:'#box',            data:{                a: testTemplate   //一开始让a的第一个组件            },            components:{        //要把组件写入到components里面，如果没有放的话在切换的时候就会找不到 组件                'testTemplate':testTemplate,                'testTemplate2':testTemplate2            }        });    </script></body></html>

阅读全文

0 0