Javascript

vue3.0之watchEffect,watch用法

本文主要是介绍vue3.0之watchEffect,watch用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<template>
  <div>{{propContent}}</div>
</template>

<script>
import { watchEffect, watch, ref } from "vue";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    listArr: {
      type: Object
    },
    list1: {
      type: String
    }
  },
  setup(props, content) {
    let propContent = ref(0);
    watch(
      () => props.list1,
      (val, oldval) => {
        /* ... */
        propContent.value = parseInt(val) + 2;
        console.log("val", val);
        console.log("oldval", oldval);
        console.log("propContent", propContent);
      },
      {
        immediate: true,
        deep: true
      }
    );
    // watchEffect(() => {
    //   console.log("watchEffect", props);
    //   propContent.value = parseInt(props.list1) + 2;
    //   console.log("propContent", propContent);
    // });
    return {
      propContent
    };
  }
};
</script>
<style lang="less" scoped>
</style>

从父组件传了input框的(可以动态改)

list1，然后子组件里面监听
这篇关于vue3.0之watchEffect,watch用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航