Vue全域性元件與區域性元件的區別

阿新 • • 發佈：2019-01-11

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>

Vue全域性元件與區域性元件的區別

1、元件宣告 <template id="father"> <div> <h3>這是{{name}}</h1> <di

詳解vue全域性元件與區域性元件使用方法

這篇文章主要為大家詳細介紹了vue全域性元件與區域性元件的使用方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 vue全域性／區域性註冊，以及一些混淆的元件main.js入口檔案的一些常用配置，在入口檔案上定義的public.vue為全域性元件，在這裡用的是pug模版

vue全域性元件和區域性元件的寫法

vue元件有兩種，一種是全域性元件，一種是區域性元件。整個專案經常用到的用全域性寫法，用到比較少的專供特定頁面用的使用區域性元件。全域性元件引入寫法：在專案的main.js中：import Vue from 'vue'; import MyComponent from '@/

Vue框架整理：全域性元件、區域性元件、特殊元件建立方法

vue的元件也是需要註冊後才可以使用的，註冊有全域性註冊和區域性註冊兩種；全域性元件註冊後，任何vue例項都可以用： <div id="v1"> <first-component></first-componen

Vue學習之路（六）---父元件與子元件之間的資料傳遞

前面我講了基本元件的寫法，現在一起學下父元件怎樣傳遞資料到子元件，以及子元件傳遞資料到父元件的 1.父元件傳遞資料到子元件 1.1 通過props傳遞父元件App.vue中 <component-a big-num=98></component-a&g

全域性變數與區域性變數的區別

一、變數的分類變數可以分為：全域性變數、靜態全域性變數、靜態區域性變數和區域性變數。按儲存區域分，全域性變數、靜態全域性變數和靜態區域性變數都存放在記憶體的靜態儲存區域，區域性變數存放在記憶體的棧區。按作用域分，全域性變數在整個工程檔案內都有效；靜

Python中的全域性變數與區域性變數的區別

全域性變數與區域性變數兩者的本質區別就是在於作用域用通俗的話來理解的話，全域性變數是在整個py檔案中宣告，全域性範圍內都可以訪問區域性變數是在某個函式中宣告的，只能在該函式中呼叫它，如果試圖

vue元件，父元件與子元件之間通訊

vue元件，元件是一個可複用的功能模組，即將具有相同功能的模組抽取成一個元件，在需要的地方引用即可，這體現了程式碼封裝的思想，下面看一下元件是如何實現： // 定義一個名為 button-counter 的新元件 Vue.component('button-counter',

Vue 父元件與子元件之間傳值

一、父元件與子元件之間值傳遞步驟如下：例如：我有一個父元件Myhome.vue 和一個子元件Header.vue 1、父元件呼叫子元件的時候，動態繫結屬性值 <v-myheader :title="title"></v-myheader> 2、在子元件使用&nb

Vue中在父元件中定義子元件與父子元件間傳值

在父元件中定義子元件我們除了定義獨立的元件之外，Vue還支援在父元件中定義子元件。示例原始碼 <!DOCTYPE html> <html lang="en"> <

Vue.js的元件（二）父元件與子元件的資料聯絡之父傳子

假設有如下元件： /*js*/ Vue.component('my-button',{ tempalte:'<button>一個按鈕</button>' }) var app3 = new Vue({ el:'#ap

Vue.js的元件（三）父元件與子元件的資料聯絡之子傳父之自定義事件

父傳子是單向的，子會因父的改變而改變，但父並不會因子的改變而改變。這是由於Vue.js怕父的資料會被使用者在不知情的情況下改變。但是，子還是可以繞一個圈，把自己的資料傳給父。途徑：自定義事件。在解釋子資料傳給父之前，必須先要對事件有一個瞭解。所謂

Vue.js的元件（四）父元件與子元件的資料聯絡之雙向繫結

之前有說到，父元件傳資料到子元件是通過元件的屬性props來實現的，這是一種單向繫結。父可以影響子，子不能影響父。但是子可以通過自定義事件來讓自己的資料影響到父。只要把這兩種方法結合起來，就可以

vue中子元件的拆分父元件與子元件之間的傳值

vue是元件式開發，儘量獨立出子元件 prop()：父元件傳值給子元件 $emit()：子元件傳值給父元件子元件中的設定：使用bind <template> 　　: default-checked = "check" 　　@chec

vue父元件與子元件間如何進行資料傳遞

vue父元件和子元件間怎麼進行資料傳遞 ★ 父元件傳遞資料給子元件(可以通過props屬性來實現)：由於元件例項的作用域是孤立的。這意味著不能 (也不應該) 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 props

Python之路Python全域性變數與區域性變數、函式多層巢狀、函式遞迴 Python之路Python全域性變數與區域性變數、函式多層巢狀、函式遞迴

Python之路Python全域性變數與區域性變數、函式多層巢狀、函式遞迴一、區域性變數與全域性變數 1、在子程式中定義的變數稱為區域性變數，在程式的一開始定義的變數稱為全域性變數。全域性變數作用域是整個程式，區域性變數作用域是定義該變數的子程式。全域性變數

微信小程式wepy框架中父元件與子元件通訊和互動

官網上描述： $broadcast $broadcast事件是由父元件發起，所有子元件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序為廣度優先搜尋順序。 $emit $emit與$broadcast正好相反，事件發起元件的所有祖先元件會依次接收到$emit事件。 $in

python之全域性變數與區域性變數

全域性變數和區域性變數的區別在於作用域，全域性變數在整個py檔案中宣告，全域性範圍內可以使用；區域性變數是在某個函式內部宣告的，只能在函式內部使用，如果超出使用範圍（函式外部），則會報錯。 1 #!/usr/bin/python3 2 # -*- coding: utf-8 -*- 3 # @T

全域性變數與區域性變數的詳解

一、變數的分類變數可以分為：全域性變數、靜態全域性變數、靜態區域性變數和區域性變數。按儲存區域分，全域性變數、靜態全域性變數和靜態區域性變數都存放在記憶體的靜態儲存區域，區域性變數存放在記憶體的棧區。按作用域分，全域性變數在整個工程檔案內都有效；靜態全域性變數只在定義它的檔

Vue 全域性過濾器、區域性過濾器的載入-0921

注意： 1、版本相容性問題 <script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script> <script src="https://cdn.bootcss.c

Vue全域性元件與區域性元件的區別

1、元件宣告

3、元件掛載

4、元件例項

6、特殊的屬性is

相關推薦