vue进阶(1) ---自定义组件

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>

猜你喜欢

转载自blog.csdn.net/here962464/article/details/78413889