Vue--vue中的組件、組件綁定事件和數據、私有組件、子組件，父子組件參數互傳

時間  2019-11-11
標籤 vue 組件 綁定 事件 數據 私有 父子 參數 简体版
原文   原文鏈接

一.公有組件以及組件的使用和特色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
13 <template id="tlogin">
14     <div>
15         用戶名：<input type="text"><br>
16         密&nbsp;&nbsp;碼：<input type="text">
17     </div>
18 </template>
19 <!-- <script type="x-template" id="tlogin">
20     <div>
21         用戶名：<input type="text"><br>
22         密&nbsp;&nbsp;碼：<input type="text">
23     </div>
24 </script> -->
25 
26 <div id="app">
27     <vue-login></vue-login>
28 </div>
29 </body>
30 <script>
31     //公有組件：
32     //注意：
33     //  1)全部的模板代碼都都必須有一個根標籤
34     //  2)若是組件的名稱如首字母大寫：
35     //      a.全部的字母所有小寫
36     //      b.內部若是也有大寫將大寫將改成小寫而且在這個字母以前加上一個「-」
37 
38 
39     //1.0 將組件的定義和註冊分爲兩步來執行
40     // //  定義格式：
41     // // Vue.extend({
42     // //     template: "組件的html代碼"
43     // // });
44     // var login = Vue.extend({
45     //     template: "<h1>我是login</h1>"
46     // });
47     // //  註冊：
48     // //  參數一：當前註冊組件的名稱
49     // //  參數二：組件對象
50     // //   Vue.component("login",login)//向Vue中註冊組件：
51     // Vue.component("login",login);
52 
53     //2.0組件的定義和註冊一步到位
54     //使用組件時必定要給組件加上根標籤
55     // Vue.component("login",{
56     //     template: "<div>用戶名：<input type='text'><br/>密　碼：<input type='text'></div>"
57     // });
58 
59     //3.0組件的使用三：
60     Vue.component("VueLogin",{
61         template: "#tlogin"
62     });
63 
64     //4.0組件的使用四：
65     // Vue.component("login",{
66     //     template: "#tlogin"
67     // });
68 
69     // 實例化vue對象（MVVM中的View Model）
70     new Vue({
71         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
72         el:'#app'
73     })
74 </script>
75 </html>

 

二.給組件綁定事件和數據

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
13 <template id="reg">
14    <div>
15         <input type="text" v-model="name">
16         <input type="text" v-model="age">
17         <button @click="getValue">註冊</button>
18    </div>
19 </template>
20 <div id="app">
21     <register></register>
22 </div>
23 
24 </body>
25 
26 <script>
27     //定義和註冊
28     Vue.component("register",{
29         template:"#reg",
30         data:function() {
31          return {
32              name:"我是組件中的name屬性",
33              age:18
34          }   
35         },
36         methods:{
37             getValue:function() {
38                 alert("我被點擊了");
39             }
40         }
41     });
42 
43     // 實例化vue對象（MVVM中的View Model）
44     new Vue({
45         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
46         el:'#app',
47         data:{
48         // 數據 （MVVM中的Model）   
49         },
50         methods:{
51             
52         }
53     })
54 </script>
55 </html>

三.私有組件  components

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
13 <template id="tlogin">
14     <div>
15         用戶名<input type="text"><br> 
16         密碼: <input type="text">
17     </div>
18 </template>
19 <div id="app">
20     <login></login>
21 </div>
22 
23 </body>
24 
25 <script>
26 
27     // 實例化vue對象（MVVM中的View Model）
28     new Vue({
29         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
30         el:'#app',
31         data:{
32         // 數據 （MVVM中的Model）   
33         },
34         components:{  //私有組件
35             "login":{
36                 template:"#tlogin"
37             }
38         }
39     })
40 </script>
41 </html>

四.子組件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>   
<script src="../vue2.4.4.js"></script>
</head>

<body>
<!-- 定義一個vue的管理區塊，（MVVM中的View） -->
<div id="app">
    <account></account>
    <login></login><!-- 會報錯，由於login是account組件的私有組件 -->
    
</div>

</body>

<script>
    // 定義組件
    Vue.component("account",{
        template:"<div>account<login></login><register></register></div>",
       components:{ "login":{ template:"<div>login</div>", }, "register":{ template:"<div>register</div>", } }
    });

    // 實例化vue對象（MVVM中的View Model）
    new Vue({
        // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
        el:'#app',
        data:{
        // 數據 （MVVM中的Model）   
        },
        methods:{
            
        }
    })
</script>
</html>

五.使用component中的is來實現組件切換     

   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
13 <template id="account">
14     <div>
15         <a href="#" @click="componentId='login'">登陸</a>
16         <a href="#" @click="componentId='register'">註冊</a>
17         <!-- :is 至關於給component綁定組件，綁定is後面的值對應的組件 -->
18         <component :is="componentId"></component>
19 </div>
20 </template>
21 <div id="app">
22     <account></account>
23 </div>
24 </body>
25 <script>
26     Vue.component("account",{
27         template:"#account",
28         // 在父組件中添加一個componentId的屬性，未來給上面模板中的component使用
29 data:function() { 30 return { 31 componentId:"login" 32  } 33  },
34         // methods:{
35         //     register:function() {
36         //         this.componentId = "register";
37         //     }
38         // },
39         components:{
40             "login":{
41                 template:"<span>login</span>"
42             },
43             "register":{
44                 template:"<span>register</span>"
45             }
46         }
47     });
48     // 實例化vue對象（MVVM中的View Model）
49     new Vue({
50         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
51         el:'#app',
52         data:{
53         // 數據 （MVVM中的Model）   
54         },
55         methods:{
56         }
57     })
58 </script>
59 </html>

六.父組件傳值給子組件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="../vue2.4.4.js"></script>
10 </head>
11 
12 <body>
13     <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
14     <template id="account">
15         <div>account<br/>
16             <login :aname="name"></login>
17         </div>
18     </template>
19     <div id="app">
20         <account></account>
21     </div>
22 
23 </body>
24 
25 <script>
26     Vue.component("account", {
27         template: "#account",
28         data: function () {
29             return {
30                 name: "account中的name"
31             }
32         },
33         components: {
34             "login": {
35 template: "<div>子組件輸出：{{aname}}</div>", 36 props:["aname"] // 這個是用來接受未來父組件傳遞過來的參數的數據
37             },
38            
39         }
40     });
41 
42     // 實例化vue對象（MVVM中的View Model）
43     new Vue({
44         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
45         el: '#app',
46         data: {
47             // 數據 （MVVM中的Model）   
48         },
49         methods: {
50 
51         }
52     })
53 
54 </script>
55 
56 </html>

七.子組件傳值給父組件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="../vue2.4.4.js"></script>
10 </head>
11 
12 <body>
13     <!-- 定義一個vue的管理區塊，（MVVM中的View） -->
14     <template id="account">
15         <div>
16             {{name}}<br/>
17             <login @loginkey="getV"></login>
18         </div>
19     </template>
20     <div id="app">
21         <account></account>
22     </div>
23 
24 </body>
25 
26 <script>
27     Vue.component("account", {
28         template: "#account",
29         data: function () {
30             return { name: "" }
31         },
32         methods: {
33             getV: function (value) {
34                 //接收子組件傳遞過來的參數
35                 this.name = value;
36             }
37         },
38         components: {
39             "login": {
40                 template: "<div><button @click='sendV'>點我將name傳給父元素</button></div>",
41                 data: function () {
42                     return {
43                         name: "login中的name"
44                     }
45                 },
46                 methods: {
47                     sendV: function () {
48                         // 咱們要將子組件的name屬性設置給父組件
49                         // 這個send方法須要一個鍵值對
50                         this.$emit('loginkey', this.name); 51                     }
52                 }
53             }
54 
55         },
56 
57 
58     });
59     // 實例化vue對象（MVVM中的View Model）
60     new Vue({
61         // vm控制的區塊爲id爲app的div，此div中的全部vue指令都可以被vm解析
62         el: '#app',
63         data: {
64             // 數據 （MVVM中的Model）   
65         },
66         methods: {
67 
68         }
69     })
70 
71 </script>
72 
73 </html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程