zoukankan      html  css  js  c++  java

  • Vue--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>

     
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    chrome标签记录——关于各类性能优化
    JavaScript（二）——在 V8 引擎中书写最优代码
    JavaScript学习（一）——引擎，运行时，调用堆栈
    MySQL数据库操作生成UUID
    使用Spring MVC实现文件上传与下载
    敏捷过程（小规模团队敏捷开发）
    后台获取日期值，前台Js对日期进行操作
    搭建Spring相关框架后，配置信息文件头部出现红色小×错误。
  • 原文地址：https://www.cnblogs.com/mrszhou/p/7864782.html
Copyright © 2011-2022 走看看