Vue：属性侦听器

最新推荐文章于 2023-06-14 16:35:55 发布

小猫虎儿~

最新推荐文章于 2023-06-14 16:35:55 发布

阅读量190

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_61562639/article/details/126131462

版权

本文介绍了Vue3中属性侦听器（watch）的使用，通过示例展示了如何利用watch监听属性变化，解决父组件传递给子组件的数据在更新时子组件未响应的问题。例如，当输入框字符长度超过10时显示警告，以及实现千米和米之间的自动转换。这两个例子揭示了watch在处理数据变化和业务逻辑中的关键作用。

摘要由CSDN通过智能技术生成

在Vue3中的属性侦听器是watch；

可以方便的监听某个属性的变化,以完成复杂的业务逻辑。

遇到父组件传递子组件，父组件属性值改变时子组件数据不更新问题,使用watch监听属性解决。

例1：

当在输入框输入的字符长度大于10时，则会弹出提示窗口：“文本内容太长”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="searchText">
    </div>
    <script>
        const obj={
            data(){
                return{
                    searchText:''
                }
            },
            //属性侦听器
            watch:{
                searchText(oldText,newText){
                    if(newText.length>=10){
                        alert('文本内容太长')
                    }
                }
            }
        } 
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

运行结果：

例2：

以下实例进行千米与米之间的换算：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
    千米 : <input type = "text" v-model = "kilometers">
    <br/><br/>
    &nbsp;&nbsp;米&nbsp; : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>    
<script>
const app = {
  data() {
    return {
      kilometers : 0,
      meters:0
    }
  },
  watch : {
	  kilometers:function(val) {
		  this.kilometers = val;
		  this.meters = this.kilometers * 1000
	  },
	  meters : function (val) {
		  this.kilometers = val/ 1000;
		  this.meters = val;
	  }
  }
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
</body>
</html>

运行结果：