Vue - 組件

時間 2019-12-04

標籤 vue 組件简体版

原文原文鏈接

組件的註冊

全局組件

<!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">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app1">
    <!-- 全局組件是共用的 -->
    <zjm></zjm>
</div>
<hr>
<div id="app2">
    <!-- 屢次調用 -->
    <zjm></zjm>
    <zjm></zjm>
</div>
<script>
    // 全局組件 Vue.component("組件的名稱"，{template: ``})
 Vue.component("zjm", { template: `<div><h1>這是組件</h1></div>`, }); const app = new Vue({ // 做用域1
 el: "#app1", }) const app2 = new Vue({ // 做用域2
 el: "#app2" }) </script>
</body>
</html>

局部註冊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 7 
 8 </head>
 9 <body>
10     <div id="app">
11         <duanyu></duanyu>
12     </div>
13     <script>
14  let xuyang = { 15  template:`<div>
16                 <h1>{{name}}</h1>
17                 <<button @click="my_click">點擊</button>
18             </div>
19  `, 20  data:function(){ 21                 return{ 22  name:"渣渣輝"
23  } 24  }, 25  methods:{ 26  my_click:function(){ 27  alert(123) 28  } 29  } 30  }; 31  const app = new Vue({ 32  el:"#app", 33  components:{ 34  duanyu:xuyang, 35  } 36  }) 37 
38     </script>
39 </body>
40 </html>

子組件註冊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     <father></father>
13 </div>
14 <script>
15  let zzj = { 16  template: `<div><h2>這是子組件</h2></div>`, 17  }; 18  let fzj = { 19  template: `<div>
20                     <h1>這是父組件</h1>
21                     <child></child>
22                     </div>`,
23  components: { 24  child: zzj, // 註冊子組件 
25  } 26  }; 27  const app = new Vue({ 28  el: "#app", 29  components: { 30  father: fzj // 註冊父組件
31  } 32  }) 33 </script>
34 </body>
35 </html>

組件的通訊

父子通訊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <father></father>
11     </div>
12     <script>
13  let child = { 14  template:`<div>
15                     <h2>這是子組件</h2>
16                     <p>父親給了{{money}}RMB</p>
17                     </div>`,
18  props:['money'] 19  }; 20  let father = { 21  template:`<div>
22                     <h1>這是父組件</h1>
23                     <child :money="num"></child>
24                     </div>`,
25  data:function(){ 26                 return{ 27  num:100, 28  } 29  }, 30  components:{ 31  child:child 32  } 33  }; 34 
35  const app = new Vue({ 36  el:"#app", 37  components:{ 38  father:father 39  } 40  }) 41     </script>
42 </body>
43 </html>

子父通訊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     <father></father>
13 </div>
14 <script>
15  let child = { 16  template: `<div>
17                     <h2>這是子組件</h2>
18                     <button @click="my_click">點我給我父親發信息</button>
19                     </div>`,
20 
21  methods: { 22  my_click: function () { 23                 // 提交事件
24                 this.$emit("son_say", "爸~你要當爺爺了~~"); 25  } 26  } 27  }; 28  let father = { 29  template: `<div>
30                     <h1>這是父組件</h1>
31                     <!--// 接收這個事件-->
32                     <child @son_say="my_son_say"></child>
33                     <p>老婆~~你兒子說~~{{mes}}</p>
34                     </div>`,
35  components: { 36  child: child 37  }, 38  data(){ 39             return { 40  mes: ""
41  } 42  }, 43  methods: { 44  my_son_say: function (data) { 45  console.log(data) 46                 this.mes = data; 47  } 48  } 49  }; 50 
51  const app = new Vue({ 52  el: "#app", 53  components: { 54  father: father 55  } 56  }) 57 </script>
58 </body>
59 </html>

非父子通訊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="app">
10         <gouxiaoke></gouxiaoke>
11         <sunpengfei></sunpengfei>
12     </div>
13     <script>
14         
15  let xiaoxiong = new Vue(); 16  let gouxiaoke = { 17  template:`<div>
18                         <h1>這是劉小科</h1>
19                         <button @click="my_click">點我給老孫發消息</button>
20                         </div>`,
21  methods:{ 22  my_click:function(){ 23                     //給中間調度器提交事件
24                     //alert(123)
25  xiaoxiong.$emit("tonight","今晚洗白白") 26  } 27  } 28  }; 29  let sunpengfei = { 30  template : `<div>
31                             <h1>這是老孫</h1>
32                             <p>劉小科跟我說{{say}}</p>
33                         </div>`,
34  data(){ 35                 return{ 36  say:""
37  } 38  }, 39             //組件加載完成後去作的一些事情
40  mounted(){ 41  let that = this; 42  xiaoxiong.$on("tonight",function(data){ 43  console.log(data) 44  console.log(this) 45  that.say = data; 46  }) 47  } 48 
49  }; 50 
51  const app = new Vue({ 52  el:"#app", 53  components:{ 54  gouxiaoke:gouxiaoke, 55  sunpengfei:sunpengfei, 56  } 57  }) 58 
59     </script>
60 
61 </body>
62 </html>

相關標籤/搜索

每日一句

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