Vue全局组件与局部组件的区别

1、组件声明

<!-- 全局组件模板father模板 -->
<template id="father">
    <div>
         <h3>这是{{name}}</h1>
         <div>
             <p>这是{{data}}</p>
         </div>
    </div>
</template>
var FATHER = {
    template: "#father",
    data: function() {
         return {
              name: "一个全局组件-模板-",
              data: "数据:18892087118"
         }
     }
 };

2、组件注册

Vue.component('father', FATHER);

3、组件挂载

<h5>全局组件1</h5>
<father></father>

4、组件实例

<!DOCTYPE html>
<html>
<head>
    <title>vue2.0 --- 局部组件与全局组件</title>
</head>

<body>
    <h3>vue2.0局部组件与全局组件</h3>

    <div id='app'>
        <h5>局部组件</h5>
        <fatherlocal></fatherlocal>
        <hr>

        <h5>全局组件1</h5>
        <father></father>
        <hr>

        <h5>全局组件2</h5>
        <child :fromfather='giveData'></child>
    </div>

    <!-- 局部组件模板fatherlocal -->
    <template id="father-local">
        <div>
            <h3>这是{{name}}</h1>
            <div>
                <p>这是{{data}}</p>
            </div>
        </div>
    </template>

    <!-- 全局组件模板father -->
    <template id="father">
        <div>
            <h3>这是{{name}}</h1>
            <div>
                <p>这是{{data}}</p>
            </div>
        </div>
    </template>

    <template id="child">
        <div>
            <h3>这是{{name}}</h3>
            <div>
                <p>{{cmsgtwo}}</p>
                <p>{{cmsg}}</p>
                <p>{{fromfather}}</p>
                <p>{{fromfather.fmsg}}</p>
                <p><input type="button" value="按钮" @click=" "></p>
            </div>
        </div>
    </template>

    <script src="vue_2.2.2_vue.min.js"></script>
    <script type="text/javascript">
        // 定义组件
        var FATHER = {
            template: "#father",
            data: function() {
                return {
                    name: "一个全局组件-模板-",
                    data: "数据:18892087118"
                }
            }
        };

        var CHILD = {
            template: "#child",
            data: function() {
                return {
                    name: "子组件",
                    cmsg: "子组件里的第一个数据",
                    cmsgtwo: "子组件里的第二个数据"
                }
            },
            methods: {
                change: function() {
                    this.fromfather.fmsg = "子组件数据被更改了"
                }
            },
            mounted: function() {
                this.cmsg = this.fromfather;
            },
            props: ["fromfather"],
        };

        // 注册组件
        Vue.component('father', FATHER);
        Vue.component("child", CHILD);

        var vm = new Vue({
            data: {
                fmsg: "data里的数据",
                giveData: {
                    fmsg: "这是父组件里的数据"
                }
            },
            methods: {},
            // 局部组件fatherlocal
            components: {
                'fatherlocal': {
                    template: '#father-local',
                    data: function() {
                        return {
                            name: "局部-父组件",
                            data: "局部-父组件里的数据"
                        }
                    }
                }
            }
        }).$mount('#app');
    </script>
</body>
</html>

6、特殊的属性is

当使用 DOM 作为模板时 (例如,将el选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul><ol><table><select>限制了能被它包裹的元素,而一些像<option>这样的元素只能出现在某些其它元素内部。

自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:

<body> 
    <div id="app1"> 
        <ul>   
            <li is="my-component"></li> 
        </ul> 
    </div> 
        
    <script>  
        Vue.component("my-component",{    
            template:"<h1>{{message}}</h1>",    
            data:function(){      
                return {        
                    message:"hello world"      
                }    
            }  
        });  

        new Vue({    
            el:"#app1"  
            }) 
    </script> 
</body>

阅读更多

没有更多推荐了,返回首页