前段时间写了一个新的项目,开发建议说用VUE来写,以前只是听说过,却没有真正实践,项目中遇到了几个菜鸟问题,现记录如下:

Vue父组件向子组件传值

起因: 父组件调用统一消息提示框,要求提示文字不同

  1. 先定义一个子组件,在组件中注册props

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <template>
    <div>
    <div>{{ message }}子组件</div>
    </div>
    </template>
    <script>
    export default {
    props: {
    message: String // 定义传值的类型
    }
    }
    </script>
  2. 在父组件中引用子组件,并传入子组件中需要的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <template>
    <div>
    父组件
    <child :message="parentMsg" />
    </div>
    </template>
    <script>
    import child from './child' //引入child组件
    export default {
    data () {
    return {
    parentMsg: 'a message from parent'
    }
    },
    components: {
    child
    }
    }
    </script>

Vue定时执行函数

起因: 消息提示框显示3秒后自动消失

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
data () {
return {
showMessage: ''
}
},
mounted () {
this.$nextTick(() => {
setInterval(() => {
this.showMessage = false
}, 3000)
})
}
}

注:

  1. mounted: 编译好的HTML挂载到页面完成后执行的事件钩子。此钩子函数中一般会做一些ajax请求获取数据,进行数据初始化。mounted在整个实例中只执行一次。
  2. $nextTick>是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick>,则可以在回调后获取更新后的DOM。

    watch监听输入框变化

    起因: 需要对一输入框做正则验证,并在输入的时候判断是否符合条件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <template>
    <div>
    <input type="text" placeholder="请填写名称" v-model="name" />
    <p>{{ messageName }}</p>
    </div>
    </template>
    <script>
    export default {
    data () {
    return {
    name: '',
    messageName: ''
    }
    },
    watch: { //watch() 监听某个值(双向绑定)的变化,从而达到change事件监听的效果
    name: {
    handler: function () {
    if(!/^[a-zA-Z0-9]{3,13}$/.test(this.name)) {
    this.messageNmae = '英文、数字或两种组合,3-12个字符'
    } else {
    this.messageName = ''
    }
    },
    deep: true
    }
    }
    }
    </script>

Vue子组件调用父组件的方法

起因: 子组件需要用到父组件ajax请求的get()方法;或者开启父组件中另一个子组件(弹窗)
this.$parent.get()或者this.$parent.showModal = true

Vue获取Input的值

  1. input默认为空。
    使用v-model = “inputValue”,通过this.inputValue即可获取到对应的值。
  2. input有默认值(设置了value的input)
    这种情况不用使用v-model,否则data中的初始化值会把value的值覆盖掉。
    这里可以使用ref
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <input type="text" v-model="inputValue" />
    <a @click="get"></a>
    <script>
    export default {
    data () {
    return {
    inputValue: ''
    }
    },
    method: {
    get () {
    alert(this.$refs.inputValue.value);
    }
    }
    }
    </script>