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

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

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

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

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

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

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

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

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

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

1.组件之间的值得传递

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

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

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

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

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

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

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

　　如何定义子组件的class

　　如何定义子组件的style

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

　　具体介绍查询官网吧

2.具体代码如下

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

<template>
    <div class='div-input-out'>
        <label>{{labelText}}</label>
        <input class='div-input' type='text' :placeholder=pl :class='clazz' :style="{fontSize:fontSize+'px'}" v-model:value="value"
         v-on:keyup='keyups'>
    </div>
</template>

<script>
    /* eslint-disable */
    // eslint-disable-next-line
    export default {
        props:                             　　　　　  //定义props,为组件的属性,改属性可以是自定义属性,可以是element属性,可以是style,可以是class
                                        　　　　　　   //定义props的目的为了让父组件能够获取该内容,该vue的props定义,相当于java中的接口,具体值可以在这里定义默认值,可以在父组件中再定义或修改
            [                             　　　　　   //未详细定义都为string类型的props,若要定义每种props的具体类型,使用json格式
                'labelText',             　　　　　　  //自定义一个label的内容
                'pl',                     　　　　　　 //使用一个属性placeholder
                'value',                 　　　　　　  //绑定一个值
                'fontSize',             　　　　　   　//绑定一个style,font-size改为fontSize格式,类似style都以此方式修改定义
                'clazz',                 　　　　　　  //绑定一个class
            ],
        name: 'div-input',                 　　　　　　//组件的标签名
        methods: {
            keyups: function() {         　　　　　　  //定义一个keyup函数
                console.log(this._props.value); 　　  //子组件中keyup函数中获取初始化的value
            }
        },
    }
</script>
<style scoped>
    /*固定的style,不进行修改的内容*/
    .div-input-out {
        margin: 10px;
    }

    .div-input {
        height: 25px;
        width: 400px;
        border-radius: 4px;
        padding: 5px 20px;
        outline: none;
    }
</style>

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

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

<template>
    <div id='app'>
        this is my first demo
        <button v-on:click="testClick()">测试获取value</button>
        <hr>
        <!--复用组件-->
        <!--复用组件:    labelText动态赋值-->
        <!--复用组件:    pl静态赋值-->
        <!--复用组件:    value动态绑定-->
        <!--复用组件:    fontsize静态赋值-->
        <!--复用组件:    clazz动态赋值-->
        <lyh-input :labelText='input01.labelText' pl='请输入01' :value='input01.value' :fontSize='22' :clazz='input01.clazz'></lyh-input>
        <lyh-input :labelText='input02.labelText' pl='请输入02' :value='input02.value' :fontSize='16' :clazz='input02.clazz'></lyh-input>
    </div>
</template>

<script>
    /* eslint-disable */
    // eslint-disable-next-line
    import lyhInput from './components/input'                 //导入lyhInput

    export default {
        name: 'App',
        data: function() {
            return {
                input01: {                                     //第一个input
                    labelText: '第一个输入框的标题',        　　 　//动态赋值props属性
                    clazz: 'meClazz',                          //动态赋值clazz属性给class
                    value: '001',                              //动态赋值value
                },
                input02: {
                    labelText: '第二个输入框的标题',
                    clazz: 'meClazz',
                    value: '002',
                },
            }
        },
        methods: {
            testClick: function() {                            //这里修改vue对象或属性
                console.log(this.$children[0]);             　　//获取当前子组件vue对象
                console.log(this.$children[1]);
                console.log(this.$children[0].$props);         //获取当前子组件props对象
                console.log(this.$children[1].$props);
                console.log(this);                             //获取当前vue对象
                console.log(this.$el);                         //获取当前vue对象对应的element自身的dom对象
            },
        },
        components: {
            lyhInput,
        }
    }
</script>
<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 60px;
        text-align: center;
    }
</style>

各种绑定和获取方式都在代码和注释中了

3.相关效果的截图

注：

vue2.0以后去除了props的双重绑定功能，即禁止子组件在父组件调用中修改自身的props，因此也建议和官方的推荐一样使用，毕竟props的双向绑定会导致值得修改不明确

若必须需要双向绑定，网上有相应的解决方案，不贴了就。

建议定义好props以后，对props的修改只在父组件做。多数情况下，父组件需要修改子组件的props定义，说明该props不应该定义在子组件中，即该接口定义有误，或需要另一个组件