(精华2020年5月6日更新) vue教程篇 组件component的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件的方式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <hello></hello>
        <my-world></my-world>
        <!-- <myWorld></myWorld> -->
    </div>
    <script>
        // 方式1:先创建组件构造器,然后由组件构造器创建组件
        // 1. Vue.extend创建组件构造器
        var mycom = Vue.extend({
            template: '<h2>hello word</h2>'
        });
        // 2. Vue.component(组件名,组件构造器)
        Vue.component('hello', mycom);

        // 方式2:直接创建组件 (推荐)
        Vue.component('my-world', {
            template: '<h2>世界, 你好</h2>'
        });

        var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root
            el: '#app',
            data: {
                msg: '啦啦啦'
            }
        });
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的分类  全局组件、局部组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="itapp">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <div id="app">
        {{name}}
        <my-hello></my-hello>
        <!-- <my-world></my-world> -->
    </div>
    <script>
        //  全局组件 可以在所有的vue实例中使用
        Vue.component('my-hello',{
            template:'<h2>我是全局组件</h2>',
            data(){   //在组件中存储数据时,必须以函数形式,函数返回一个对象
                return {
                    name:'laney'
                }
            }
        });

        /**
		 * 局部组件,只能在当前vue实例中使用
		 */

        var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
			el:'#itapp',
			data:{
				msg:'软谋'
			},
            components:{
                'my-world':{
                    template:'<h2>世界, 你好 {{age}}</h2>',
                    data(){  
                        return {
                            age:'20'
                        }
                    }
                }
            }
		});	

        new Vue({ //这里的vm也是一个组件,称为根组件Root
			el:'#app',
			data:{
				name:'tom'
			}
        })

    </script>
</body>
</html>

动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="flag='my-hello'">显示hello组件</button>
        <button @click="flag='my-world'">显示world组件</button>
        
         <!-- 默认每次都会销毁非活动组件并重新创建
         缓存,避免重新渲染, -->
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>
        <!-- <my-world></my-world> -->
    </div>

    <template id="wbs">
        <div>
            <h3>{{msg}}</h3>
            {{time}}
            <ul>
                <li v-for="(item,index) in arr" :key="index">{{item}}</li>
            </ul>
        </div>
    </template>
    <script>

        var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
			el:'#app',
			data:{
				msg:'软谋',
                flag:'my-hello'
			},
            components:{
                'my-world':{
                    name:'wbsx',
                    template:'#wbs',
                    data(){  
                        return {
                            age:'20',
                            msg:'world',
                            arr:['tom','jack','laney'],
                            time:Math.random()
                        }
                    }
                },
                'my-hello':{
                    template:'<h2>我是my hello {{time}}</h2>',
                    data(){
                        return {
                            time:Math.random()
                        }
                    }
                }
            }
		});	

    </script>
</body>
</html>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页