Vue組件之全局組件與局部組件

時間 2019-11-08

標籤 vue 組件全局局部简体版

原文原文鏈接

組件 (Component) 是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。我的認爲就是一個能夠重複利用的結構層代碼片斷。html

全局組件註冊方式：Vue.component(組件名,{方法})es6

eg:小程序

<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
    <my-component></my-component>

</div>
<script>
Vue.component("my-component",{
    template:"<h1>我是全局組件</h1>"
});
new Vue({
    el:"#app"
});
new Vue({
    el:"#app1"
})
</script>
</body>

渲染結果：瀏覽器

<div id="app">
    <h1>我是全局組件</h1>
</div>
<div id="app1">
    <h1>我是全局組件</h1>
</div>

這裏須要注意：app

1.全局組件必須寫在Vue實例建立以前，纔在該根元素下面生效；函數

eg:this

<body>
<div id="app">
    <my-component></my-component>
</div>
<div id="app1">
    <my-component></my-component>

</div>
<script>
    new Vue({
        el: "#app"
    });
    Vue.component("my-component", {
        template: "<h1>我是全局組件</h1>"
    });
    new Vue({
        el: "#app1"
    })
</script>
</body>

這樣只會渲染app1根元素下面的，並不會渲染app根元素下面的，而且會報錯。es5

2.模板裏面第一級只能有一個標籤，不能並行；spa

<body>
<div id="app">
    <my-component></my-component>
</div>
<script>
    new Vue({
        el: "#app"
    });
    Vue.component("my-component", {
        template: "<h1>我是全局組件</h1>" +
        "<p>我是全局組件內標籤</p>"
    });
    new Vue({
        el: "#app1"
    })
</script>
</body>

這樣子會報錯，而且只會渲染第一個標籤h1;咱們應該這樣子寫：code

<body>
<div id="app">
    <my-component></my-component>
</div>
<script>
    new Vue({
        el: "#app"
    });
    Vue.component("my-component", {
        template: "<h1>我是全局組件<p>" +
        "我是全局組件內標籤</p></h1>"
    });
    new Vue({
        el: "#app1"
    })
</script>
</body>

局部組件註冊方式，直接在Vue實例裏面註冊

eg:

<body>
<div id="app1">
    <child-component></child-component>
</div>
<script>
    new Vue({
        el: "#app1",
        components:{
            "child-component":{
                template:"<h1>我是局部組件</h1>"
            }
        }
    });
</script>

局部組件須要注意：

1.屬性名爲components，s千萬別忘了;

2.套路比較深，因此建議模板定義在一個全局變量裏，代碼看起來容易一點，以下：（模板標籤比較多的時候，這樣子寫更加簡潔規整）

<body>
<div id="app1">
    <child-component></child-component>
</div>
<script>
    var child={
        template:"<h1>我是局部組件</h1>"
    };
    new Vue({
        el: "#app1",
        components:{
            "child-component":child
        }
    });
</script>
</body>

關於組件中的其餘屬性，能夠和實例中的同樣，可是data屬性必須是一個函數：

eg:

<body>
<div id="app1">
    <child-component></child-component>
</div>
<script>
    var child={
        template:"<button @click='add2'>我是局部組件:{{m2}}</button>",
        data:function(){
            return {m2:1}
        },
        methods:{
            add2:function(){
                this.m2++
            }
        }
    };
    new Vue({
        el: "#app1",
        components:{
            "child-component":child
        }
    })
</script>
</body>

顯示結果：

全局組件和局部組件同樣，data也必須是一個函數：

<body>
<div id="app1">
    <my-component></my-component>
</div>
<script>
    Vue.component("my-component",{
        template:"<button @click='add1'>全局組件：{{m1}}</button>",
        data:function(){
            return {
                m1:10
            }
        },
        methods:{
            add1:function(){
                this.m1++
            }
        }
    });
    new Vue({
        el:"#app1"
    })
</script>
</body>

顯示結果：

當使用 DOM 做爲模板時 (例如，將 el 選項掛載到一個已存在的元素上)，你會受到 HTML 的一些限制，由於 Vue 只有在瀏覽器解析和標準化 HTML 後才能獲取模板內容。尤爲像這些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像<option> 這樣的元素只能出如今某些其它元素內部。

自定義組件 <my-row> 被認爲是無效的內容，所以在渲染的時候會致使錯誤。變通的方案是使用特殊的 is 屬性：

eg:

<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>

渲染結果爲：

對於全局與局部的做用域問題，咱們能夠這樣理解，只要變量是在組件內部用的，這些變量必須是組件內部的，而在外部html結構中引用的變量，都引用的是該掛載下的實例裏面的變量

eg:

<body>
<div id="app1">
<my-component></my-component>
</div>
<script>
 Vue.component("my-component",{
     template:"<button @click='add3'>" +
     "{{message}}</button>",
     data:function(){
         return {
             message:"hello world"
         }
     },
     methods:{
         add3:function(){
             alert("我是局部")
         }
     }
 });
 new Vue({
     el:"#app1",
     methods:{
         add3:function(){
             alert("我是全局")
         }
     }
 })
</script>
</body>

彈出框顯示：我是局部

Vue中所謂的全局指的是該掛載下的區域；

下面這種作法是錯誤的，按個人想法以爲應該會彈出：我是全局，可是卻報錯，也就是說組件處於全局下不能夠添加默認事件，要用全局的事件函數，必須父子通訊

<body>
<div id="app1">
<my-component @click="add3"></my-component>
</div>
<script>
 Vue.component("my-component",{
     template:"<button @click='add3'>" +
     "{{message}}</button>",
     data:function(){
         return {
             message:"hello world"
         }
     }
 });
 new Vue({
     el:"#app1",
     methods:{
         add3:function(){
             alert("我是全局")
         }
     }
 })
</script>
</body>

額外話題：

1.函數return後面必須跟返回的內容，不能換行寫

eg:

下面這種寫法不會返值回來：

2.Vue和小程序等同樣，採用es6的函數寫法，this指向是不同的

<body>
<div id="app1">
    <button @click="f">ES5</button>
    <button @click="f1">ES6</button>
</div>
<script>
new Vue({
    el:"#app1",
    methods:{
        f:function(){
          console.log(this)
        },
        f1:()=>{
            console.log(this)
        }
    }
})
</script>
</body>

結果：

第一個this指的是Vue實例

第二個this指的是Window

因爲它和小程序不同，我發如今data裏面this指的是window，在methods裏面this纔是Vue實例

因此建議你們用es5寫吧

new Vue({
    el:"#app1",
    data:{that:this},
})

博文地址：http://www.cnblogs.com/douyae...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。