vue的component

Posted 森海轮回

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的component相关的知识,希望对你有一定的参考价值。

组件

组件(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>

以上是关于vue的component的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件之全局组件与局部组件

vue-个人学习----组件

What's the difference between @Component, @Repository & @Service annotations in Spring?(代码片段

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段11——vue路由的配置