二、vue組件

1.1扔枫、Vue組件注冊(cè)

注冊(cè)vue組件的步驟：創(chuàng)建組件構(gòu)建器

注冊(cè)組件

使用組件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <script>
        //創(chuàng)建組件構(gòu)造器  有語法糖簡(jiǎn)化寫法
         const cpn = Vue.extend({
             template:`<div>
                        <h1>我是標(biāo)題</h1>
                        <p>我是內(nèi)容</p> 
                      </div>`
         });
        //注冊(cè)組件
        Vue.component("my-cpn",cpn);
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
    </script>
</body>

</html>

總結(jié)：

創(chuàng)建組件的基本步驟：創(chuàng)建組件構(gòu)造器锹安、注冊(cè)組件以及使用組件短荐。

語法：創(chuàng)建組件構(gòu)造器：

const c = Vue.extend({

template:'布局內(nèi)容'

});

注冊(cè)組件： Vue.component("標(biāo)簽名稱【自定義】",c【構(gòu)造器名稱】);

1.2、局部組件和全局組件

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <div id="app1">
        <cpn></cpn> 
    </div>
    <script>
        /*全局組件   全局組件就意味著可以在多個(gè)Vue實(shí)例中使用*/
        //創(chuàng)建組件構(gòu)造器   
        const comApp = Vue.extend({
            template: `<div>
                        <h1>我是標(biāo)題</h1>
                        <p>全局組件的使用</p> 
                      </div>`
        });
        //注冊(cè)組件 
        Vue.component("my-cpn", comApp);
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
        /*全局組件   全局組件就意味著可以在多個(gè)Vue實(shí)例中使用*/

        /*局部組件  再項(xiàng)目的開發(fā)中使用最多的還是局部組件  */
        const comApp1 = Vue.extend({
            template: `<div>
                        <h1>我是標(biāo)題</h1>
                        <p>局部組件的使用</p> 
                      </div>`
        });
        let app1 = new Vue({
            el: "#app1", 
            components: {
                //cpn 就是組件的標(biāo)簽名   comApp1：是組件構(gòu)造器的名稱
                cpn: comApp1
            }
        });
       /*局部組件  */
    </script>
</body>

</html>

總結(jié)：

全局組件是可以在多個(gè)Vue實(shí)例中進(jìn)行使用叹哭，但是在實(shí)際的開發(fā)中使用全局組件比較少忍宋。

局部組件是在單個(gè)的創(chuàng)建的Vue實(shí)例使用，需要單獨(dú)創(chuàng)建組件構(gòu)造器风罩，但是在實(shí)際的開發(fā)過程使用局部組件比較多糠排。

1.3 、父組件與子組件

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body> 
    <div id="app1">
        <comapp2></comapp2> 
    </div>
    <script> 

        /* 子組件  */
        const comApp1 = Vue.extend({
            template: `<div>
                        <h1>我是標(biāo)題</h1>
                        <p>子組件的使用</p> 
                      </div>`
        });
        /*父組件 */
        const comApp2 = Vue.extend({
            template: `<div>
                        <h1>我是標(biāo)題</h1>
                        <p>父組件的使用</p> 
                        <comapp1></comapp1>
                      </div> 
                      `,
           components:{
               comapp1:comApp1
           }
        });
        let app1 = new Vue({
            el: "#app1", 
            components: {
                //cpn 就是組件的標(biāo)簽名   comApp1：是組件構(gòu)造器的名稱
                comapp2: comApp2
            }
        });
       /*  */
    </script>
</body>

</html>

總結(jié)：

每個(gè)組件構(gòu)造器中都會(huì)有一個(gè) components屬性超升，用來掛載子組件的構(gòu)造器乳讥。

語法如下：

const c = Vue.extend ({

template:``,

components:{

標(biāo)簽名：子組件構(gòu)造器名稱 [標(biāo)簽名為自定義]

}

});

而父組件則掛載到根組件上面，也就是創(chuàng)建的Vue實(shí)例廓俭。

需要注意：子組件的標(biāo)簽必須放到父組件的div里面云石，要不然會(huì)報(bào)錯(cuò)。

1.4研乒、注冊(cè)組件的語法糖寫法

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <div id="app1">
        <cpn></cpn>
    </div>
    <script>
        /*全局組件  語法糖寫法*/

        //注冊(cè)組件 
        Vue.component("my-cpn", {
            template: `<div>
                        <h1>我是標(biāo)題</h1>
                        <p>全局組件的使用</p> 
                      </div>`
        });
        let app = new Vue({
            el: "#app",
            data: {
                mess: "您好"
            }
        });
        /*全局組件  語法糖寫法*/

        /*局部組件  語法糖寫法  */

        let app1 = new Vue({
            el: "#app1",
            components: {
                //cpn 就是組件的標(biāo)簽名   comApp1：是組件構(gòu)造器的名稱
                cpn: {
                    template: `<div>
                        <h1>我是標(biāo)題</h1>
                        <p>局部組件的使用</p> 
                      </div>`
                }
            }
        });
       /*局部組件 語法糖寫法  */
    </script>
</body>

</html>

總結(jié)：看以上代碼汹忠。

1.5、組件模板的分離寫法

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <cpn></cpn>
    </div>
    <script type="text/x-template" id ="con">
        <div>
            <h1>組件抽離第一種寫法</h1>
            <p>局部組件的使用</p> 
          </div>
    </script>
    <template id ="con">
        <div>
            <h1>組件抽離二種寫法</h1>
            <p>局部組件的使用</p> 
          </div>
    </template>
    <script>
        /*局部組件  語法糖寫法  */
        let app1 = new Vue({
            el: "#app1",
            components: {
                //cpn 就是組件的標(biāo)簽名   comApp1：是組件構(gòu)造器的名稱
                cpn: {
                    template:'#con'
                }
            }
        });
       /*局部組件 語法糖寫法  */
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!--另一種寫法-->
<body>
    <div id="app">
      <par></pars>

    </div>
    <template id="parent">
        <div>
            父組件
           <ch></ch>
        </div>
    </template>
    <template id="child">
        <div>子組件</div>
    </template>
    <script>
        let app = new Vue({
            el: "#app",
            components: {
                par: {
                    template: "#parent",
                    components:{
                        ch:{
                            template: "#child",
                        }
                    } 
                }
            }
        });
    </script>
</body>

</html>

總結(jié)：看以上代碼雹熬。

1.6宽菜、為什么組件使用data（）方法

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <cpn></cpn> 
    </div> 
    <template id="con">
        <div>
            當(dāng)前的數(shù)字：{{num}}<br>
            <button @click="reduce">-</button>
            <button @click="add">+</button>
        </div>
    </template>
    <script> 
        let app1 = new Vue({
            el: "#app1",
            components: {
                cpn: {
                    template: '#con',
                    data() {
                        return {
                            num: 0
                        }
                    },
                    methods: {
                        reduce() {
                            this.num--;
                        },
                        add() {
                            this.num++;
                        }
                    }
                }
            }
        }); 
    </script>
</body> 
</html>

總結(jié)：

組件多次調(diào)用，必須用data（）方法竿报，返回一個(gè)新的對(duì)象铅乡，而避免多次調(diào)用觸發(fā)事件值會(huì)發(fā)生連鎖反應(yīng)。

1.7烈菌、父組件與子組件的通信

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <par :clist="list" :cmess ="mess">
            </pars>

    </div>
    <template id="parent">
        <div>
            <ul>
                <li v-for="item in clist">{{item}}</li>
            </ul>
            {{cmess}}
        </div>
    </template>
    <script>
        const par = {
            template: "#parent",
             //props: ['clist','cmess'] //第一種方式
            //  props:{  //第二種方式
            //     clist:Array,
            //     cmess:String
            //  }
            props:{ //第三種方式
                clist:{
                    type:Array,  //  組件的變量數(shù)據(jù)類型
                    default(){   //  默認(rèn)值  但是數(shù)組的默認(rèn)必須是函數(shù)
                        return [];
                    },
                    required:true//如果等于true  使用這個(gè)變量的時(shí)候阵幸，必須是clist變量名花履。
                },
                cmess:{
                    type:String,
                    default:'',
                    required:true
                }
            }
        };
        let app = new Vue({
            el: "#app",
            data: {
                list: ['海王', '七龍珠', '海爾兄弟'],
                mess:"您好"
            },
            components: {
                par
            }
        });
    </script>
</body>

</html>

總結(jié)：

父組件與子組件之間的通信有兩種方式：

1）、props 屬性父組件向子組件傳遞

props有三種寫法：

①挚赊、直接變量寫到props數(shù)組中诡壁。請(qǐng)看代碼第一種使用方式。

②荠割、將props變成對(duì)象妹卿，里面的屬性也就是要綁定的變量，以鍵值對(duì)的方式：key：變量名 value值為：傳遞變量的數(shù)據(jù)類型蔑鹦；詳情看代碼第二種使用方式夺克。

③、將props里面的變量嚎朽，變成對(duì)象铺纽。請(qǐng)看代碼第三種使用方式。【推薦使用第三種】

注意：

定義：定義組件變量的時(shí)候火鼻，不要使用駝峰標(biāo)識(shí)的方式命名變量。

2）雕崩、通過事件從子組件向父組件傳遞魁索，也就是自定義事件。

1.8盼铁、子組件向父組件傳值并發(fā)送自定義事件

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子組件往父組件傳值</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    父組件接收子組件的值：{{mess}} <br><br>
    <com @parentclick="parent"></com>
  </div>
  <template id="temp">
    <div>
      <ul>
        <li v-for="item in list"><button @click="childchangs(item)">{{item}}</button></li>
      </ul>
    </div>
  </template>
  <script>
    const com = {
      template: "#temp",
      data() {
        return {
          list: ['數(shù)碼產(chǎn)品', '辦公耗材', '生活用品']
        }
      },
      methods: {
        childchangs(item) {
          console.log(item);
          //往父組件傳遞值
          this.$emit('parentclick', item);
        }
      }
    }
    let app = new Vue({
      el: "#app",
      components: {
        com
      },
      data: {
        mess: ''
      },
      methods: {
        parent(item) {
          this.mess = item;
        }
      }
    });
  </script>
</body>

</html>

總結(jié)：

子組件往父組件傳值粗蔚，需要借助 this.$emit('自定義事件名稱'，參數(shù)) 往父組件發(fā)送一個(gè)事件饶火，并在父組件進(jìn)行監(jiān)聽事件鹏控。以上代碼可參考。

1.9肤寝、子組件往父組件傳值当辐，并同步更新父組件上變量的值經(jīng)典案例

需求背景：

頁面中有兩個(gè)文本框【子組件】同時(shí)還有父組件的兩個(gè)變量，子組件的兩個(gè)變量鲤看，輸入文本后同時(shí)更新父組件的變量和子組件的變量缘揪。

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子組件往父組件傳值</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    父組件vue實(shí)例中變量mess1：{{mess1}}<br><br>
    父組件vue實(shí)例中變量mess2：{{mess2}}<br><br>
    <con :pmess1="mess1" :pmess2="mess2" @parevent1="parclick1" @parevent2="parclick2"></con>
  </div>
  <template id="temp">
    <div>
      子組件中變量cmess1：{{cmess1}}<br><br>
      子組件中變量cmess2：{{cmess2}}<br><br> 
      <input type="text" name="name1" :value="cmess1" @input="inputChanges1" style="width:100%"></input><br><br>
      <input type="text" name="name2" :value="cmess2" @input="inputChanges2" style="width:100%"></input>
    </div>
  </template>
  <script>
    const con = {
      template: "#temp",
      data() {
        return {
          cmess1: this.pmess1,
          cmess2: this.pmess2
        }
      },
      props: {
        pmess1: {
          type: String,
          default: "",
          required: true
        },
        pmess2: {
          type: String,
          default: "",
          required: true
        }
      },
      methods: {
        //監(jiān)聽input事件
        inputChanges1(event) {
          this.cmess1 = event.target.value;
          //發(fā)送自定義事件到父組件中
          this.$emit("parevent1", this.cmess1);
        },
        inputChanges2(event) {
          this.cmess2 = event.target.value;
          //發(fā)送自定義事件到父組件中
          this.$emit("parevent2", this.cmess2);
        }
      }
    };
    let app = new Vue({
      el: "#app",
      data: {
        mess1: "hellow word!",
        mess2: "say hi!"
      },
      components: {
        con
      },
      methods: {
        parclick1(value) {
          this.mess1 = value;
        },
        parclick2(value) {
          this.mess2 = value;
        }
      }
    });
  </script>
</body>

</html>

2.0、父子組件的訪問方式

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <cpn  ref ="cpn"></cpn>
    <button @click="parentclick">觸發(fā)子組件showmessage方法</button>
  </div>
  <template id="temp">
    <div>
      {{cmess}}
    </div>
  </template>
  <script>
    const cpn = {
      template: "#temp",
      data() {
        return {
          cmess: "您好"
        }
      },
      methods: {
        showmessage() {
         console.log("我是子組件中的showmessage函數(shù)");
        }
      }
    }
    let app = new Vue({
      el: "#app",
      components: {
        cpn
      },
      methods:{
        parentclick(){
          //第一種方式：在父組件中調(diào)用子組件的屬性或者函數(shù)   [不經(jīng)常使用]
          // this.$children[0].showmessage();
          // console.log(this.$children[0].cmess) ; 
          // console.log(this.$children); 
          // console.log("我是父組件parentclick函數(shù)义桂！");
          //第二種方式  [經(jīng)常使用]
            console.log(this.$refs.cpn.cmess); 
            console.log(this.$refs.cpn.showmessage()); 
        }
      }
    });
  </script>
</body>

</html>

總結(jié)：

如果想用父組件訪問子組件就使用： $children 或$ refs 找筝，實(shí)際開發(fā)中經(jīng)常使用$refs,但是必須在子組件的標(biāo)簽中添加 ref = '值' 屬性才能訪問到子組件的屬性或者函數(shù)。

子組件訪問父組件就使用：$parent 【不經(jīng)常使用】

2.1慷吊、solt 具名插槽基本使用【很重要】

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <cpn><button>按鈕</button></cpn>
    <cpn></cpn>
  </div>
  <template id="temp">
    <div>您好
      <div>
        <!-- 也可以在插槽中放入默認(rèn)值袖裕，如果組件沒有放入標(biāo)簽，那么會(huì)使用默認(rèn)值 -->
        <slot></slot>
      </div>
    </div>

  </template>
  <script>
    const cpn = {
      template: "#temp"
    };
    let app = new Vue({
      el: "#app",
      data: {
        mess: "您好"
      },
      components: {
        cpn
      }
    });
  </script>
</body>

</html>

總結(jié)：

插槽的定義：抽取共性溉瓶，保留不同急鳄。

1谤民、插槽的基本使用 <solt></solt> 2、插槽是可以放默認(rèn)值攒岛，如果組件標(biāo)簽中沒有其他內(nèi)容那么頁面會(huì)渲染出插槽中的默認(rèn)值赖临，如果組件標(biāo)簽中有元素，那么會(huì)將插槽中的元素替換掉灾锯。

2.2兢榨、具名插槽的使用

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <cpn>
      <span slot="left">左邊1</span>
      <span slot="center">中間1</span>
      <span slot="right">右邊1</span>
    </cpn>
    <cpn> 
      <span slot="right">標(biāo)題</span>
    </cpn>
  </div>
  <template id="temp">
    <div>您好
      <div>
        <slot name="left"><button>左邊</button></slot>
        <slot name="center"><button>中間</button></slot>
        <slot name="right"> <button>右邊</button></slot>
      </div>
    </div>

  </template>
  <script>
    const cpn = {
      template: "#temp"
    };
    let app = new Vue({
      el: "#app",
      data: {
        mess: "您好"
      },
      components: {
        cpn
      }
    });
  </script>
</body>

</html>

總結(jié)：

在實(shí)際的開發(fā)過程中有些部分不是共用的，我們需要將不是共用部分放到指定的位置顺饮，就得需要具名插槽吵聪。

2.3、作用于插槽的使用

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <cpn>
      <template slot-scope="slot">
       <span v-for ="item in slot.data">{{item}}****</span>
      </template>
    </cpn>
  </div>
  <template id="cpn">
    <div>
      <slot :data ="list">
        <ul>
          <li v-for="item in list">{{item}}</li>
        </ul>
      </slot> 
    </div>
  </template>

  <script>
    const cpn = {
      template: "#cpn",
      data() {
        return {
          list: ['python', 'C++', 'java', 'C#', 'php', 'Go']
        }
      }
    }
    let app = new Vue({
      el: '#app',
      components: {
        cpn
      }
    });
  </script>
</body>

</html>

總結(jié)：

作用域插槽：父組件替換插槽的標(biāo)簽兼雄，但是內(nèi)容由子組件來提供吟逝。

在實(shí)際的開發(fā)中我們需要在組件中將數(shù)據(jù)以不同的方式展示，比如：橫向赦肋、縱向块攒，想在父組件中展示，那么我們?nèi)绾文玫阶咏M件中的數(shù)據(jù)佃乘，

1）需要在子組件模板中定義一個(gè)屬性：data= "子組件變量" [:data 隨便命名]囱井，然后再父組件中的子組件標(biāo)簽中定義模板<template slot-scope="slot"></template> 定義引用 slot-scope="slot" ，然后橫向展示數(shù)據(jù)趣避。

2.4庞呕、ES模塊化導(dǎo)入導(dǎo)出代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="AA.js" type="module"></script>
    <script src="BB.js" type="module"></script>

</head>
<body>

</body>
</html>

AA.js

//第一種導(dǎo)出方式  導(dǎo)出對(duì)象
let  name = "小明";
let flag = true;
export {
   name,
   flag
}
//第二種導(dǎo)出方式  導(dǎo)出變量
export let  name = "小明";
export let  flag = true;

//第三種導(dǎo)出方式  函數(shù)
export  function test (sum1,sum2)
{
   return sum1+sum2;
}
//第四種導(dǎo)出  類
export  class  person {
   run (){
       console.log("導(dǎo)出類");
    }
}
//第五種  export  default   一個(gè)模塊只有一個(gè)default
const  address ="山東省濟(jì)南市"
export  default address

export  default 函數(shù)   
export  default function (){
   return "export  default 函數(shù)"
}
//第六種全部導(dǎo)出  加 export
export let name ="再見"

BB.js

/**
 * Created by Mr.Fu on 2021/6/6.
 */
import {name,flag} from './AA.js'
if (flag){
    console.log(name);
}
//導(dǎo)入變量
import name from './AA.js'
console.log(name);
import flag from './AA.js'
console.log(flag);
//導(dǎo)入方法
import  {test} from './AA.js'
console.log(test(20,20));
//導(dǎo)入類
import {person} from './AA.js'
 const  p= new person();
console.log(p.run());
//導(dǎo)入 default
import  add from './AA.js'
console.log(add);
//導(dǎo)入 default 函數(shù)
import  add from './AA.js'
console.log(add());
//統(tǒng)一全部導(dǎo)入
import * as demo from './AA.js'
console.log(demo.name);

總結(jié)：

第一種

導(dǎo)出對(duì)象：

let  name = "小明";
let flag = true;
export {
   name,
   flag
}

導(dǎo)入對(duì)象：

import {name,flag} from './AA.js'
if (flag){
    console.log(name);
}

第二種

導(dǎo)出變量：

//第二種導(dǎo)出方式  導(dǎo)出變量
export let  name = "小明";
export let  flag = true;

導(dǎo)入變量：

import name from './AA.js'
console.log(name);
import flag from './AA.js'
console.log(flag);

第三種

導(dǎo)出函數(shù)：

//第三種導(dǎo)出方式  函數(shù)
export  function test (sum1,sum2)
{
   return sum1+sum2;
}

導(dǎo)入函數(shù)：

//導(dǎo)入方法
import  {test} from './AA.js'
console.log(test(20,20));

第四種

導(dǎo)出類：

//第四種導(dǎo)出  類
export  class  person {
   run (){
       console.log("導(dǎo)出類");
    }
}

導(dǎo)入類：

//導(dǎo)入類
import {person} from './AA.js'
 const  p= new person();
console.log(p.run());

第五種一個(gè)模塊只有一個(gè)default

導(dǎo)出export default：

//第五種  export  default   一個(gè)模塊只有一個(gè)default
const  address ="山東省濟(jì)南市"
export  default address

export  default 函數(shù)   
export  default function (){
   return "export  default 函數(shù)"
}

導(dǎo)入export default：

//導(dǎo)入 default
import  add from './AA.js'
console.log(add);
//導(dǎo)入 default 函數(shù)
import  add from './AA.js'
console.log(add());

第六種

全部導(dǎo)出：

//第六種全部導(dǎo)出  加 export
export let name ="再見"

全部導(dǎo)入：

//統(tǒng)一全部導(dǎo)入
import * as demo from './AA.js'
console.log(demo.name);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市程帕，隨后出現(xiàn)的幾起案子住练，更是在濱河造成了極大的恐慌，老刑警劉巖愁拭，帶你破解...
沈念sama閱讀 222,252評(píng)論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件讲逛，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡岭埠，警方通過查閱死者的電腦和手機(jī)妆绞，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,886評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來枫攀，“玉大人括饶，你說我怎么就攤上這事±凑牵” “怎么了图焰？”我有些...
開封第一講書人閱讀 168,814評(píng)論 0贊 361
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)蹦掐。經(jīng)常有香客問我技羔，道長(zhǎng)僵闯，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 59,869評(píng)論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任藤滥，我火速辦了婚禮鳖粟，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘拙绊。我一直安慰自己向图，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 68,888評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布标沪。她就那樣靜靜地躺著榄攀，像睡著了一般。火紅的嫁衣襯著肌膚如雪金句。梳的紋絲不亂的頭發(fā)上檩赢，一...
開封第一講書人閱讀 52,475評(píng)論 1贊 312
城市分裂傳說
那天挡鞍，我揣著相機(jī)與錄音梅掠，去河邊找鬼。笑死摆寄，一個(gè)胖子當(dāng)著我的面吹牛趁曼，可吹牛的內(nèi)容都是我干的军浆。我是一名探鬼主播，決...
沈念sama閱讀 41,010評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼彰阴，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼瘾敢！你這毒婦竟也來了拍冠？” 一聲冷哼從身側(cè)響起尿这，我...
開封第一講書人閱讀 39,924評(píng)論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎庆杜，沒想到半個(gè)月后射众，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,469評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡晃财，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,552評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年叨橱，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片断盛。...
茶點(diǎn)故事閱讀 40,680評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡罗洗，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出钢猛，到底是詐尸還是另有隱情伙菜，我是刑警寧澤，帶...
沈念sama閱讀 36,362評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布命迈，位于F島的核電站贩绕，受9級(jí)特大地震影響火的，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜淑倾，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,037評(píng)論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一馏鹤、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧娇哆，春花似錦湃累、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,519評(píng)論 0贊 25
一樁弒父案脱茉，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至垄开，卻和暖如春琴许，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背溉躲。一陣腳步聲響...
開封第一講書人閱讀 33,621評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來泰國(guó)打工榜田，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人锻梳。一個(gè)月前我還...
沈念sama閱讀 49,099評(píng)論 3贊 378
代替公主和親
正文我出身青樓箭券，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親疑枯。傳聞我的和親對(duì)象是個(gè)殘疾皇子辩块，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,691評(píng)論 2贊 361

二剑逃、vue組件

二、vue組件

1.1扔枫、Vue組件注冊(cè)

1.2、局部組件和全局組件

1.3 、父組件與子組件

1.4研乒、注冊(cè)組件的語法糖寫法

1.5、組件模板的分離寫法

1.7烈菌、父組件與子組件的通信

1.8盼铁、子組件向父組件傳值并發(fā)送自定義事件

1.9肤寝、子組件往父組件傳值当辐，并同步更新父組件上變量的值經(jīng)典案例

2.1慷吊、solt 具名插槽基本使用【很重要】

推薦閱讀更多精彩內(nèi)容

二、vue組件

1.1扔枫、Vue組件注冊(cè)

1.2、局部組件和全局組件

1.3 、父組件與子組件

1.4研乒、注冊(cè)組件的語法糖寫法

1.5、組件模板的分離寫法

1.7烈菌、父組件與子組件的通信

1.8盼铁、子組件向父組件傳值并發(fā)送自定義事件

1.9肤寝、子組件往父組件傳值当辐，并同步更新父組件上變量的值 經(jīng)典案例

2.1慷吊、solt 具名插槽基本使用 【很重要】

推薦閱讀更多精彩內(nèi)容

1.9肤寝、子組件往父組件傳值当辐，并同步更新父組件上變量的值經(jīng)典案例

2.1慷吊、solt 具名插槽基本使用【很重要】