zoukankan      html  css  js  c++  java
  • 431 vue局部组件用法

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <hello-world></hello-world>
            <hello-tom></hello-tom>
            <hello-jerry></hello-jerry>
            <test-com></test-com>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            /**/
            /*
                局部组件注册
                局部组件只能在注册他的父组件中使用
            */
    
            Vue.component('test-com', {
                // 报错,因为 hello-world 是局部组件,只能用在父组件app中,不能用在这里
                template: '<div>Test -- <hello-world></hello-world> </div>'
            });
    
            var HelloWorld = {
                data: function() {
                    return {
                        msg: 'HelloWorld'
                    }
                },
                template: '<div>{{msg}}</div>'
            };
    
            var HelloTom = {
                data: function() {
                    return {
                        msg: 'HelloTom'
                    }
                },
                template: '<div>{{msg}}</div>'
            };
    
            var HelloJerry = {
                data: function() {
                    return {
                        msg: 'HelloJerry'
                    }
                },
                template: '<div>{{msg}}</div>'
            };
    
            var vm = new Vue({
                el: '#app',
                data: {
    
                },
                components: {
                    'hello-world': HelloWorld,
                    'hello-tom': HelloTom,
                    'hello-jerry': HelloJerry
                }
            });
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    OpenCV --- 2.4.8组件结构全解析
    综合博客
    设计模式之适配器模式
    android 面试题
    ANDROID 中设计模式的采用--结构型模式
    技术前线
    八大排序算法
    android 面试题
    Android控件——ViewPager
    Bugly
  • 原文地址:https://www.cnblogs.com/jianjie/p/12606145.html
Copyright © 2011-2022 走看看