Vue 2 --v-model、局部組件和全局組件、父子組件傳值、平行組件傳值

1、表單輸入綁定（v-model 指令）

　　能夠用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定。

　　詳細用法參見官方文檔：https://cn.vuejs.org/v2/guide/forms.html

2、局部組件和全局組件

一、瞭解根組件template模板的優先級大於el，以下方式驗證：

<div id="app">
   {{ msg }}
</div>

<script>
    // 若是僅僅是實例化vue對象中 既有el 又有template，
    // 若是template中定義了模板的內容 那麼template模板的優先級大於el
    new Vue({ 
        el: '#app',
        data() {
            return {
                msg:'alex'
            }
        },
        template: `
            <div class="app">   // 經過控制檯可看到顯示了template中定義的div
                <h2>{{ msg }}</h2>
            </div>
        `
    })
</script>

二、局部組件的使用（聲子，掛子，用子）

<div id="app">
   <App></App>
</div>

<script>
    // 聲明一個組件 至關於自定義一個標籤 所以名字首字母要大寫 跟已有標籤區分
    // 局部組件 除了沒有el屬性 其餘屬性都與根組件（Vue實例化對象）同樣
    // 另外 組件中的data必定是一個函數 且必須有返回值
    // 1、聲明子組件
    let App = {
        data(){
            return {
                text:"我是局部組件App"
            }
        },
        // 當前組件template中的標籤與該組件的屬性有關，跟其餘組件無關
        // 子組件的template必定要寫 根組件(有el屬性)的template能夠不寫 用el
        // 組件的template中必定要用一個標籤包含，也能夠給他掛載子組件，並使用
        template:`
            <div>
                <h2>{{ text }}</h2>
            </div>
        `
    };
    new Vue({
        el: '#app',
        data() {
            return {
                msg:'alex'
            }
        },
        // 3、template中使用子組件 也能夠不定義template屬性 直接在el中使用
        // 以標籤的形式 如<App />或者<App></App>
        template: `
            <div class="app">
                <App />
            </div>
        `,
        // 屬性components用來掛載子組件
        components:{
            // 2、掛載子組件App（能夠掛載多個子組件 用逗號隔開依次書寫便可）
            App  // 至關於App:App  若是鍵值同樣,能夠只寫一個
        }
    })
</script>

　　總結：

　　　　1）一個子組件掛載到哪一個組件，這個組件就是個人父組件；

　　　　2）之後模塊化開發時，一個組件就是一個文件（一個組件包含了html，css，js），想使用這個組件時導入便可使用

三、全局組件的使用

<div id="app">
    <!-- 使用局部組件App和Vheader -->
    <App></App>
    <Vheader></Vheader>
</div>

<script>
    // 使用component方法 聲明一個全局組件 全局組件不須要掛載 任一組件可以使用
    // 第一參數是組件的名字 第二個參數是options
    Vue.component('VBtn',{
        data(){
            return {

            }
        },
        template:`
            <button>按鈕</button>
        `
    });

    // 聲明一個局部組件Vheader
    let Vheader = {
        data(){
            return {
                text:"我是局部組件Vheader"
            }
        },
        // 使用全局組件VBtn
        template:`
            <div class="vheader">
                <h2>{{ text }}</h2>
                <VBtn></VBtn>
            </div>
        `
    };

    // 聲明一個局部組件
    let App = {
        data(){
            return {
                text:"我是局部組件App"
            }
        },
        // 使用全局組件VBtn
        template:`
            <div class="app">
                <h2>{{ text }}</h2>
                <VBtn></VBtn>
            </div>
        `
    };
    
    new Vue({
        el: '#app',
        data() {
            return {
            }
        },
        components:{
            App,  // 掛載局部組件App
            Vheader  // 掛載局部組件Vheader
        }
    })
</script>

補充：使用vue內置組件slot分發內容從而自定義按鈕的值，代碼修改以下：

Vue.component('VBtn',{
    data(){
        return {

        }
    },
    template:`
        <button><slot></slot></button>
    `
});
// 聲明一個局部組件Vheader
let Vheader = {
    data(){
        return {
            text:"我是局部組件Vheader"
        }
    },
    // 使用全局組件VBtn
    template:`
        <div class="vheader">
            <h2>{{ text }}</h2>
            <VBtn>登陸</VBtn>
        </div>
    `
};

3、父子組件之間傳值

一、父組件往子組件傳值

<div id="app">
    <App></App>   <!-- 使用局部組件App -->
</div>

<script>
    // 聲明一個局部組件Vheader
    let Vheader = {
        data(){
            return {

            }
        },
  // 掛載父組件的屬性，該組件中就能夠使用，從父組件接收到的值也可再傳給其子組件
        props:['msg','post'],
        template:`
            <div class="vheader">
                <h2>子組件Vheader start</h2>
                <p>{{ msg }}</p>
                <p>{{ post.title }}</p>
                <h2>子組件Vheader end</h2>
            </div>
        `
    };

    // 聲明一個局部組件App
    let App = {
        data(){
            return {
                text:"我是父組件App的數據",
                app_post:{
                    id: 1,
                    title: 'hello world'
                }
            }
        },
        //
        template:`
            <div class="app">
                <Vheader :msg='text' :post='app_post'></Vheader>
            </div>
        `,
        components:{
            Vheader  // 掛載局部組件Vheader
        }
    };

    new Vue({
        el: '#app',
        data() {
            return {
            }
        },
        components:{
            App  // 掛載局部組件App
        }
    })
</script>

　總結：

　　　　1）在子組件中使用props聲明，就能夠在該組件中使用；

　　　　2）從父組件中接收到的值也能夠傳遞給他的子組件；

　　　　3）父組件中綁定自定義的屬性；

二、子組件往父組件傳值

<div id="app">
    <App></App>      <!-- 使用局部組件App -->
</div>

<script>
    // 聲明一個全局組件VBtn
    Vue.component('VBtn',{
        data(){
            return {}
        },
        props:['id'],  // 父組件Vheader傳遞過來的值
        template:`
            <button @click="clickHandler">{{ id }}</button>
        `,
        methods:{
            clickHandler(){
                console.log(this);  // 每一個組件中的this指的是當前組件對象
                // this.$emit('父組件中聲明的自定義的事件', ' 傳值')
                this.id++;
                this.$emit('click_Handler', this.id);
            }
        }
    });
    // 聲明一個局部組件Vheader
    let Vheader = {
        data(){
            return {}
        },
        props:['post'],  // 父組件App傳遞過來的數據
        template:`
            <div class="vheader">
                <VBtn :id='post.id' @click_Handler="fuClickHandler"></VBtn>
            </div>
        `,
        methods:{
            fuClickHandler(val){
                this.$emit('fatherHandler', val)  // 往父組件App傳值
            }
        }
    };
    // 聲明一個局部組件App
    let App = {
        data(){
            return {
                app_post:{
                    id: 1,
                    title: 'hello world'
                }
            }
        },
        template:`
            <div class="app">
                {{ app_post.id }}
                <Vheader :post='app_post' @fatherHandler="father_handler"></Vheader>
            </div>
        `,
        methods:{
          father_handler(val){
              this.app_post.id = val
          }
        },
        components:{
            Vheader  // 掛載局部組件Vheader
        }
    };
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components:{
            App  // 掛載局部組件App
        }
    })
</script>

　　總結：

　　　　1）子組件中，經過this.$emit('父組件中自定義的事件名', '值')，來觸發父組件中自定義的事件；

　　　　2）父組件中自定義事件（當前事件中接收子組件的），併爲對應的子組件綁定（v-on）自定義的事件；

5、平行組件之間傳值

<div id="app">
    <App></App>   <!-- 使用局部組件App -->
</div>

<script>
    // TestA ==》 TestB 傳值
    // 平行組件傳值前提：這兩個方法必須綁定在同一個實例化對象(bus)上
    let bus = new Vue();  // 聲明一個Vue對象，只是用來平行組件間傳值
    // TestB要聲明事件 bus.$on('事件的名字', function(val){})
    // TestA要觸發事件 bus.$emit('TestA組件中聲明的事件名', '值')
    // 聲明一個全局組件TestB
    Vue.component('TestB',{
        data(){
            return {
                text: ""
            }
        },
        template:`
            <h2>{{ text }}</h2>
        `,
        created(){
            // 聲明事件
            bus.$on('testData', (val) => {   // 注意這裏用箭頭函數
                this.text = val
            })
        }
    });
    // 聲明一個全局組件TestA
    Vue.component('TestA',{
        data(){
            return {
                msg: "我是子組件TestA的數據"
            }
        },
        template:`
            <button @click="clickHandler">TestA組件中按鈕</button>
        `,
        methods:{
            // 定義觸發的函數
            clickHandler(){
                console.log(bus);
                bus.$emit('testData', this.msg)
            }
        }
    });
    // 聲明一個局部組件Vheader
    let Vheader = {
        data(){
            return {}
        },
        template:`
            <div class="vheader">
                <TestA></TestA>
                <TestB></TestB>
            </div>
        `,
    };
    // 聲明一個局部組件App
    let App = {
        data(){
            return {}
        },
        template:`
            <div class="app">
                <Vheader></Vheader>
            </div>
        `,
        components:{
            Vheader  // 掛載局部組件Vheader
        }
    };
    // 根組件，能夠沒有template屬性，直接在el中使用子組件
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components:{
            App  // 掛載局部組件App
        }
    })
</script>

　　總結：（以A->B傳值爲例）

　　　　1）聲明一個Vue對象（bus對象），只是用來平行組件間傳值；

　　　　2）B要聲明事件 bus.$on('事件的名字', function(val){})；

　　　　3）A要觸發事件 bus.$emit('TestA組件中聲明的事件名', '值')；

　　　　4）注意：記住平行組件傳值前提是這兩個方法必須綁定在同一個實例化對象(bus)上；

六、補充知識點

一、關於this指向的問題，與vm實例沒有任何關係，而是與箭頭函數和普通函數的區別。總結兩點：

　　1）es5的普通函數，this指向是指向了調用者，好比vue實例的方法（在methods中聲明瞭一個方法）是由vue實例vm調用的，因此this指向vm。

　　2）箭頭函數的this指向它的調用者所在的上下文，也就是vm實例所在的上下文（定義vm的父類），即window。

二、vuejs官網中的組件註冊部分解讀

三、將vue添加至chorme