vue证明题五，组件传值与绑定

最新推荐文章于 2024-11-02 19:19:35 发布

anyu0190

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量103

点赞数

文章标签： javascript json java ViewUI

原文链接：http://www.cnblogs.com/liuyuhangCastle/p/11119439.html

版权

上文中写了一个input组件，该组件需要复用，但是并不是每个组件都相同的

比如我定义了一个组件，是个矿泉水瓶子，这个瓶子分为大中小三个号，定义了三种瓶子的容积，定义了必须有瓶盖，瓶口，瓶子质地

但是瓶子的标签，瓶子的细节形状不同

因此瓶子不同的矿泉水生产商的550ml瓶子容积相同，瓶口相同，而品牌辨识度不同的原因

即，矿泉水瓶本身是一个接口，有基础定义

即，不同厂商的矿泉水瓶是该接口的实现，有具体实现定义

因此我对于上文中提到的input组件，定义了基础的style，定义了keyup事件，但是父组件在使用此组件的时候，可能有细节设置的不同

比如标题不同，说明不同，id不同等等

所以，子组件定义了接口，父组件使用，这里就会产生一些问题

1.组件之间的值得传递

　　子组件获取自身的接口默认定义

　　父组件为子组件静态定义值

　　父组件为子组件动态定义值

　　父组件获取子组件的接口值

　　父组件对子组件的接口值得修改

　　如何定义子组件的属性，如id，value，placeholder，type

　　如何定义子组件的自定义属性，如自定义个labelText

　　如何定义子组件的class

　　如何定义子组件的style

　　这里就是使用了子组件在定义的时候使用的props的相关功能

　　具体介绍查询官网吧

2.具体代码如下

2.1.input组件的定义（子组件）

 1 <template>
 2     <div class='div-input-out'>
 3         <label>{{labelText}}</label>
 4         <input class='div-input' type='text' :placeholder=pl :class='clazz' :style="{fontSize:fontSize+'px'}" v-model:value="value"
 5          v-on:keyup='keyups'>
 6     </div>
 7 </template>
 8 
 9 <script>
10     /* eslint-disable */
11     // eslint-disable-next-line
12     export default {
13         props:                             　　　　　  //定义props,为组件的属性,改属性可以是自定义属性,可以是element属性,可以是style,可以是class
14                                         　　　　　　   //定义props的目的为了让父组件能够获取该内容,该vue的props定义,相当于java中的接口,具体值可以在这里定义默认值,可以在父组件中再定义或修改
15             [                             　　　　　   //未详细定义都为string类型的props,若要定义每种props的具体类型,使用json格式
16                 'labelText',             　　　　　　  //自定义一个label的内容
17                 'pl',                     　　　　　　 //使用一个属性placeholder
18                 'value',                 　　　　　　  //绑定一个值
19                 'fontSize',             　　　　　   　//绑定一个style,font-size改为fontSize格式,类似style都以此方式修改定义
20                 'clazz',                 　　　　　　  //绑定一个class
21             ],
22         name: 'div-input',                 　　　　　　//组件的标签名
23         methods: {
24             keyups: function() {         　　　　　　  //定义一个keyup函数
25                 console.log(this._props.value); 　　  //子组件中keyup函数中获取初始化的value
26             }
27         },
28     }
29 </script>
30 <style scoped>
31     /*固定的style,不进行修改的内容*/
32     .div-input-out {
33         margin: 10px;
34     }
35 
36     .div-input {
37         height: 25px;
38         width: 400px;
39         border-radius: 4px;
40         padding: 5px 20px;
41         outline: none;
42     }
43 </style>

2.2.input组件的调用和定义（父组件）

注：父组件为子组件定义的class，必须是定义在子组件的style的scoped中的，定义在父组件的scoped中的并不起作用

 1 <template>
 2     <div id='app'>
 3         this is my first demo
 4         <button v-on:click="testClick()">测试获取value</button>
 5         <hr>
 6         <!--复用组件-->
 7         <!--复用组件:    labelText动态赋值-->
 8         <!--复用组件:    pl静态赋值-->
 9         <!--复用组件:    value动态绑定-->
10         <!--复用组件:    fontsize静态赋值-->
11         <!--复用组件:    clazz动态赋值-->
12         <lyh-input :labelText='input01.labelText' pl='请输入01' :value='input01.value' :fontSize='22' :clazz='input01.clazz'></lyh-input>
13         <lyh-input :labelText='input02.labelText' pl='请输入02' :value='input02.value' :fontSize='16' :clazz='input02.clazz'></lyh-input>
14     </div>
15 </template>
16 
17 <script>
18     /* eslint-disable */
19     // eslint-disable-next-line
20     import lyhInput from './components/input'                 //导入lyhInput
21 
22     export default {
23         name: 'App',
24         data: function() {
25             return {
26                 input01: {                                     //第一个input
27                     labelText: '第一个输入框的标题',        　　 　//动态赋值props属性
28                     clazz: 'meClazz',                          //动态赋值clazz属性给class
29                     value: '001',                              //动态赋值value
30                 },
31                 input02: {
32                     labelText: '第二个输入框的标题',
33                     clazz: 'meClazz',
34                     value: '002',
35                 },
36             }
37         },
38         methods: {
39             testClick: function() {                            //这里修改vue对象或属性
40                 console.log(this.$children[0]);             　　//获取当前子组件vue对象
41                 console.log(this.$children[1]);
42                 console.log(this.$children[0].$props);         //获取当前子组件props对象
43                 console.log(this.$children[1].$props);
44                 console.log(this);                             //获取当前vue对象
45                 console.log(this.$el);                         //获取当前vue对象对应的element自身的dom对象
46             },
47         },
48         components: {
49             lyhInput,
50         }
51     }
52 </script>
53 <style>
54     #app {
55         font-family: 'Avenir', Helvetica, Arial, sans-serif;
56         -webkit-font-smoothing: antialiased;
57         -moz-osx-font-smoothing: grayscale;
58         color: #2c3e50;
59         margin-top: 60px;
60         text-align: center;
61     }
62 </style>