vue进阶（1） ---自定义组件

最新推荐文章于 2024-10-06 22:31:10 发布

here962464

最新推荐文章于 2024-10-06 22:31:10 发布

阅读量4k

点赞数 1

分类专栏：前端框架文章标签： vue自定义组件

本文链接：https://blog.csdn.net/here962464/article/details/78413889

版权

前端框架专栏收录该内容

19 篇文章 0 订阅

订阅专栏

vue自定义组件

1、局部组件，局部组件必须要手动挂载，不然无法生效
2、全局组件，全局组件不需要手动挂载，但是不常用，尽量不要在全局上挂载变量或者组件（可能会影响浏览器性能）
3、配合模板使用实现组件间的嵌套

example：局部组件和全局组件的使用方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="example">
            <hello></hello>
            <world></world>
        </div>
        <script type="text/javascript">
            //自定义组件(组件注册一定要在实例化vue之前),组件内部也支持钩子方法
            //1、局部组件   必须要手动挂载  不然不生效
            var Hello = {
                template:"<h1 @click='clickFn'>{{ msg }}</h1>",
                //自定义组件（局部组件和全局组件都是）和vue实例不一样的是，vue实例的data是一个json，而自定义组件的data是一个函数，并且格式固定！必须以json形式return
                data: function(){
                    return {
                        msg:"点我"
                    }
                },
                methods:{
                    clickFn: function(){
                        alert("Don't touch me!")
                        this.msg = "Don't touch me!";
                    }
                },
                //钩子方法，在模板渲染之前
                //vue 没有控制器的概念，因此我们通过钩子来代替控制器
                beforeCreate : function(){
                    console.log('I am ready')
                },
                //钩子方法，在模板渲染完成之后
                mounted : function(){
                    console.log('I have finished')
                }
            }
            //2、全局组件 无需手动挂载 不常用（尽量不要在全局上挂载变量或者组件）
            //注册组件
            Vue.component('world',{
                template:"<h1 @click='clickFn'>{{ msg }}</h1>",
                data: function(){
                    return {
                        msg:'点我'
                    }
                },
                methods:{
                    clickFn: function(){
                        alert('You can touch me~')
                        this.msg = "You can touch me~";

                    }
                }
            })
            //实例化vue对象并且手动挂载自定义组件
            var vm = new Vue({
                el:'#example',
                components:{//在这个方法里面挂载自定义组件，前面是标签名称，后面是首字母大写的变量名
                    'hello':Hello
                }
            });
        </script>
    </body>
</html>

example：配合模板自定义局部组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue测试2</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <style type="text/css">
            *{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <div id="example">
            <!-- 组件调用 -->
            <hello></hello>
            <!-- {{title}}  title is not defined -->
        </div>
        <!-- 编写模板（模板在HTML页面中会默认display：none） -->
        <template id="example01">
            <!-- vue2.0以后，模板内不支持多个代码片段，必须要有层级关系 -->
            <div>
                <ul>
                    <!-- <li>{{msg}}</li>  msg is not defined -->
                    <li>{{title}}</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                </ul>
            </div>
        </template>
        <script type="text/javascript">
            //Vue自定义组件（配合模板使用方法）   自定义的组件**默认**是不能和vue实例共享数据的
            //自定义局部组件
            var Hello = {
                //使用模板
                template : '#example01',//选择器
                data : function(){
                    return {
                        title : 'I am son'
                    }
                }
            }
            //挂载组件
            var vm = new Vue({
                el:'#example',
                data : {
                    msg : " I am father"
                },
                components: {
                    'hello':Hello
                }
            });
        </script>
    </body>
</html>

example：配合模板自定义局部组件并实现组件间的嵌套

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- vue组件间的套用 -->
        <div id="example">
            <!-- 父组件 -->
            <parent></parent>
        </div>
        <!-- 定义模板 -->
        <!-- 一定要注意，使用模板配合组件套用的时候，不要直接把子组件放在父组件标签里面，要放在模板里，因为渲染时模板会替换标签，所以标签里的内容都会被忽略的 -->
        <template id="example01">
            <div>
                <h1>我是父组件</h1>
                <!-- 子组件 -->
                <child></child>
            </div>
        </template>

        <script>
            //注意顺序，子组件注册必须在父组件之前，不然无法调用！（JS域解析原理）
            var Child = {
                template : '<h2>我是子组件</h2>'
            }
            var Parent = {
                template : '#example01',
                components : {
                    'child':Child
                }
            }
            var vm = new Vue({
                el:'#example',
                components : {
                    'parent': Parent
                }
            });
        </script>
    </body>
</html>