前言

眾所周知，組件的資料是用data函式回傳的，每一個組件的資料都是獨立，這是高級的軟體工程思想：高內聚，低耦合，
突然有一天，一個對v-model指令愛得癡狂的前端汪失了智，想在父子組件中繼續與v-model的孽緣，于是父子組件變得更加糾纏不清，愈加可怕，
它的使用是這樣的：父的data資料可以影響子的視圖資料，給子視圖資料初始值，而子的視圖資料改變又可以反過來影響父的data資料，

提示：本文是vue組件的終結篇，

一、奇思妙想·父子v-model

實作原理：
······································································

入門思考：
v-model常用于input的text中，它的效果：<1> vue中資料可以影響視圖中的資料;<2> 視圖中的資料也可以反過來影響vue中資料，
——>
根據vue的回應式資料原理,無論是利用插值運算式還是用v-bind:value,我們可以輕松實作<1>;
而<2>則可以先通過input事件根據$event.taget.value獲取視圖中的資料，再通過自定義函式替換修改vue中的資料，

········································································

癲瘋進階：

目標效果：<1>讓父組件的vue資料去驅動子組件的視圖資料，<2>又讓子組件的視圖資料改變父組件的vue， ——> 通過props，將父組件資料傳給子組件，子組件定義mounted()函式在子組件掛載好后將得到的資料替換子組件data中的資料，而子組件的input則用v-bind:value系結自己的data資料，完成第<1>步，子組件的input監聽input事件，將$event.target.value作為引數傳入，在子組件的自定義事件中，呼叫$emit將視圖資料傳給父組件，父組件監聽emit自定義事件，獲得傳遞過來的資料后，在自定義函式中將資料系結到自己的data資料中，由此實作了這么喪心病狂的操作，

<body>
    <!-- vue實體 -->
    <div id="app"> 
        <father></father>
    </div>

    <!-- 父組件模板 -->
    <template id="father">
        <div style="background-color: aquamarine;padding: 20px;">
            {{message}}
            <hr>
            <children v-bind:cmessage="message" @ckick="fatherget"></children>
        </div>
    </template>

    <!-- 子組件模板 -->
    <template id="children">
        <div style="background-color: darkseagreen;">
            <input type="text" v-bind:value="dcmessage" v-on:input="textclick($event)">
        </div>
    </template>
</body>

 //  父組件
    const father={
        template:"#father",
        data() {
            return {
                message: 'hello vue',
            };
        },
        methods: {
            fatherget(a) {
                console.log("父組件拿到資料",a);
                this.message=a;
            },
        },
    };
   Vue.component('father',father);
   //  子組件
   const children={
        template:"#children",
        props:{
            cmessage:String
        },
        data() {
            return {
                dcmessage: '我是子組件的資料',
            };
        },
        methods: {
            textclick(a) {
                console.log("獲取到輸入"+a.target.value);
                this.$emit('ckick',a.target.value);
            },
        },
        mounted() {
            this.dcmessage=this.cmessage;
        },
        
    };
   Vue.component('children',children);
     
     
     //props獲得父資料，子data系結props里的資料，
     //子input用v-bind系結資料，子用$event獲得input內容，利用$emit傳給父去處理資料，
     const app=new Vue({el:"#app"});

最終效果：
組件奇思妙想

二、父子資料訪問(非組件間通信)

父組件訪問子組件：使用$ children（陣列型別，包含所有子組件物件）或$ refs（自定義名字獲取），子組件訪問父組件：使用$ parent

1.父組件訪問子組件-$children

代碼如下（示例）：

<body>
    <div id="app">
        <father></father>
        <cvue></cvue>
    </div>

    <!-- 父組件 -->
    <template id="father">
        <div style="background-color: greenyellow;padding: 10px;">
            {{message}}
            <button @click="btnclick">我是父組件</button>
            <children></children>
           
        </div>
    </template>

    <!-- 子組件 -->
    <template id="children">
        <div style="background-color: lightcyan;">
            {{message}}
            <button @click="btnclick">我是子組件</button>
        </div>
    </template>

</body>

//父組件
    const father={
        template: '#father',
        data() {
            return {
                message: '我是父組件的資料',
            };
        },
        methods: {
            btnclick() {
                console.log(this.$children);
            },
        },
    }
    Vue.component("father",father);

    //子組件
    const children ={
        template:"#children",
        data() {
            return {
                message: '我是子組件的資料',
            };
        },
        methods: {
            btnclick() {
                console.log(this.$children);
            },
        },
    }
    Vue.component("children",children);


    //區域組件
    const cvue={
        template: `
        <div style="background-color:lightpink;">
            {{message}}
            <button @click="btnclick">我是區域組件</button>
        </div>
        `,
        data() {
            return {
                message: '我是區域組件的資料',
            };
        },
        methods: {
            btnclick() {
                console.log(this.$children);
            },
        },
    }
    //vue實體
    const app=new Vue({
        el:"#app",
        components:{"cvue":cvue}
    });
    // 父組件訪問子組件：使用$children（陣列型別，包含所有子組件物件）或$refs（自定義名字獲取）
    // 子組件訪問父組件：使用$parent

運行結果：
父訪問子$children

2.父組件訪問子組件-$refs

此種方法實際開發更加常用：給實體掛載元素下的組件設定 ref屬性；然后在vue實體的methods方法中呼叫$refs方法則可以找到目標組件，
注意，不能在組件中呼叫this. $ refs，如此只會回傳空物件，

<body>
    <div id="app">
        <cpn ref="aaa"></cpn>
        <cpn ref="bbb"></cpn>
        <cpn ref="ccc"></cpn>
        <button @click="vueclick">vue實體ref使用效果</button>
    </div>

    <template id="cpn">
        <div>
            <button @click="btnclick">子組件refs使用效果</button>
        </div>
    </template>
</body>

 const cpn={
        template: '#cpn',
        methods: {
            btnclick() {
                console.log(this.$refs);
            },
        },
    }
    Vue.component("cpn",cpn);

    const app=new Vue({
            el:"#app",
            methods:{
                vueclick(){
                    console.log(this.$refs);
                }
            }
        });

運行結果:

父組件訪問子組件$refs

3.子組件訪問父組件-$parent

子組件方法呼叫this. $ parent

三、插槽-slot

說到插槽，馬上想起小時候的小霸王游戲，一臺鍵盤形狀主機，上面一個插槽，插上不同的卡片就可以玩不同的游戲，
vue的插槽也是這個道理：抽取共性到組件中，將不同暴露為插槽，
使用插槽的好處：預留插槽，讓呼叫者根據自己的需求，再決定插槽中插入的內容，
代碼如下：

<body>
    <div id="app">
        <cpn><button>插一個按鈕</button></cpn>
        <cpn><input type="text" name="" id="" placeholder="插一個文本框"></cpn>
        <cpn><h1>插一個h1</h1>
    </div>

    <template id="cpn">
        <div>
            <h2>---------我是組件-----</h2>
            <slot></slot>>
            <p>-----我是潦草的結尾-----</p>
        </div>
    </template>
</body>

//抽取共性到組件中，將不同暴露為插槽，預留插槽，讓呼叫者根據自己的需求，再決定插槽中插入的內容，
    const cpn={
        template: '#cpn',
    }
   Vue.component('cpn',cpn);

   const app=new Vue({
       el:"#app",
   });

運行結果：

總結：在組件template模板中預留標簽作為插槽，vue實體掛載元素下使用組件時，通過在閉合標簽中添加標簽，實作插槽中的插入內容，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301979.html

標籤：其他

上一篇：js陣列排序常用的幾種方法

下一篇：ES6模塊化用法全決議

組件奇思妙想·父子v-model+父子資料訪問+solt插槽