码迷,mamicode.com
首页 > 其他好文 > 详细

vue3.0之watchEffect,watch用法

时间:2021-04-09 13:36:07      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:exp   return   val   list   script   vue   port   immediate   template   

<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用法

标签:exp   return   val   list   script   vue   port   immediate   template   

原文地址:https://www.cnblogs.com/lsc-boke/p/14635979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!