vue 方法整理

1、props 

 

传值（可以使用props属性来进行组件之间的数据传递）

单向数据流

props传值是单向的：父组件的数据可以传给子组件，而子组件的数据不能传给父组件，这是为了防止子组件无意修改了父组件的状态，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

父组件定义props属性：
<template>
  <div>
    <child-component :="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from parent component!"
    };
  }
};
</script>
在父组件中，通过在子组件标签上使用冒号语法来绑定props属性。在这个例子中，父组件传递了一个名为message的props属性，并用"parentMessage"的值进行了绑定。

子组件接收props值：
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>
在子组件中，通过props属性来声明接收的props。在这个例子中，子组件声明了一个名为message的props属性，类型为String，并设置了required为true，表示这个props是必需的。在子组件的模板中，可以使用双括号语法来使用props的值。

这样，父组件的"parentMessage"的值就传递给了子组件的"message"，子组件可以使用并显示出来。

这只是一个简单的示例，你可以根据实际的需求和复杂度来使用props进行数据传递。需要注意的是，props是单向数据流，即从父组件向子组件传递数据，如果需要修改传递的值，可以通过子组件触发事件来通知父组件进行修改。。

定义一个计算属性，处理 prop 的值并返回

props: ['size'],    computed: {    normalizedSize: function () {    return this.size.trim().toLowerCase()    }    }

但是，由于是计算属性，则只能显示值，而不能设置值

更好的方式，使用变量储存prop的初始值，并使用watch来观察prop的值的变化。发生变化时，更新变量的值

props:['childMsg'],    data(){      return{       temp:this.childMsg       }     },     watch:{     childMsg(){    this.temp =this.childMsg     }     }

 

验证

props: {
  propA: Number,
  propB: [String, Number],
  propC: {
    type: String,
    default: 'default value'
  }
}

在上面的例子中，propA的类型必须是Number，propB可以是String或Number，propC是一个带有默认值的String类型,如果返回不是此类型将会抛出一个警告。

自定义函数验证

props: {
  propA: {
    validator(value) {
      // 自定义验证逻辑
      return value > 0;
    }
  }
}

在这个例子中，通过validator选项可以指定一个函数来进行自定义验证。该函数接收传入的props值作为参数，返回一个布尔值，如果返回false，将会抛出一个警告

 

2、computed

在Vue中，computed属性用于定义计算属性，它基于响应式数据进行计算，并提供一个缓存的计算结果。computed属性可以简化模板中的复杂逻辑计算，提高代码的可读和可维护性。

<template>
  <>
    <p>商品名称：{{ productName }}</p>
    <p>商品价格：{{ price }}</p>
    <p>商品折扣价：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: 'iPhone',
      price: 9999,
      discount: .8
    };
  },
  computed: {
    discountedPrice() {
      return this.price * this.discount;
    }
  }
};
</script>

在这个例子中，计算属性discountedPrice基于price和discount进行计算，当price或discount发生变化时，discountedPrice会自动重新计算并更新。在模板中，直接使用{{ discountedPrice }}即可显示计算属性的值。

计算属性可以实现更复杂的逻辑，比如基于多个数据的计算、过滤、排序等操作。它也可以与其他计算属性、数据属性和方法一起使用。

需要注意的是，计算属性是基于缓存的，只有当相关的响应式数据发生变化时，计算属性的值才会重新计算。如果需要在每次访问时都执行计算逻辑，可以使用方法来代替计算属性

3、inject

在Vue中，inject用于在组件中接收由provide提供的数据或方法。它允许祖先组件向子孙组件传递数据，实现了一种跨层级的通信方式。

// 父组件提供数据
const ParentComponent = {
  provide() {
    return {
      message: 'Hello, child!'
    };
  },
  // ...
};

//组件接收数据
const ChildComponent = {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出: Hello, child!
  },
  // ...
};

inject只能接收上层(父级或更高层级)提供的数据。如果要接收跨越多级祖先的数据，可以传递一个数组来指定要接收的属性名。

4、provide选项用于向子孙组件提供数据或方法，实现一种跨层级的数据传递方式。通过provide提供的数据可以被后代组件通过inject来接收和使用。

// 父组件提供数据
const ParentComponent = {
  data() {
    return {
      message: 'Hello, child!'
    };
  },
  provide() {
    return {
      message: this.message
    };
  },
  // ...
};

// 子组件接收数据
const ChildComponent = {
  inject: ['message'],
  mounted() {
    console.log(this.message); // 输出: Hello, child!
  },
  // ...
};

在父组件中，通过provide选项返回一个带有需要提供的数据或方法的对象。在本例中，父组件提供了一个message属性。然后可以在子组件中通过inject选项指定需要接收的属性名称，并在子组件中访问到父组件提供的数据。

 4、watch

在Vue中，watch选项可以用来监听数据的变化，并在数据变化时执行相应的处理函数。

1. 使用对象语法：

watch: {
  // 监听单个数据变化
  propName: function(newVal, oldVal) {
    // 处理函数
  },
  // 监听多个数据变化
  'propName1,propName2': {
    handler: function(newVal, oldVal) {
      // 处理函数
    },
    deep: true, // 深度监听
    immediate: true // 立即执行处理函数
  }
}

2. 使用函数语法：

watch: {
  propName: {
    handler: function(newVal, oldVal) {
      // 处理函数
    },
    immediate: true
  }
}

示例

const vm = new Vue({
  data {
    return {
      message: 'Hello'
    }
  },
  watch: {
 message(newVal, oldVal) {
      console.log(`Message changed from ${old} to ${newVal}`);
    }
  }
});

vm.message = 'Hello, world!'; // 输出: Message changed Hello to Hello, world!

在上述示例中，当message的值发生变化时，watch`选项中的处理函数将会执行，并打印出新旧值。

需要注意的是，watch选项只能监听到Vue实例或组件中已存在的属性或数据的变化。如果监听的数据是异步获取的或者动态添加的属性，可能需要使用Vue的计算属性或者$watch方法进行监听。