Vue props 父组件给子组件传函数或数据

Vue props

Vue props 传函数，传对象

 

 

 

 

Vue props 传函数（传方法）

在Vue中，可以通过 props 向子组件传递函数。这允许父组件与子组件通信，子组件可以在需要时调用传递的函数。

以下是一个简单的例子：

父组件：

<template>
  <div>
    <child-component :parentMethod="parentMethod" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('This is a method from the parent component.');
    }
  }
}
</script>

 

 

子组件：

<template>
  <div>
    <button @click="parentMethod">Call Parent Method</button>
  </div>
</template>
 
<script>
export default {
  props: {
    parentMethod: {
      type: Function,
      required: true
    }
  }
}
</script>

 

在这个例子中，父组件有一个方法 parentMethod，它通过 props parentMethod 传递给子组件。子组件有一个按钮，当点击时，会调用从父组件接收的方法。

 

=========================================================================================

 

Vue props 传对象

在Vue中，props是用于组件间传递数据的一种机制。可以通过props传递基本数据类型（如字符串、数字、布尔值），甚至可以传递对象。但是，当传递对象时，应该注意到，如果直接通过props传递一个对象，那么这个对象将是一个引用类型，这意味着子组件可以修改这个对象。

解决方案：

1.  使用v-bind或简写 : 来传递对象。这样做可以确保传递的是对象的引用而不是实际的值。

2.  在子组件中，你应该使用 props 选项来声明你接收的 prop。

3.  如果你不希望子组件修改传递的对象，你可以在子组件内部使用JSON.parse(JSON.stringify())来创建对象的深拷贝。

下面是一个简单的例子：

父组件：

<template>
  <div>
    <child-component :my-object="myObject"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      myObject: {
        key1: 'value1',
        key2: 'value2'
      }
    };
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ myObject.key1 }}</p>
  </div>
</template>
 
<script>
export default {
  props: {
    myObject: Object
  }
};
</script>

在这个例子中，myObject是一个对象，它通过props传递给ChildComponent。子组件可以访问这个对象，但是不能修改它，除非子组件内部做了深拷贝。

 

=========================================================================================

Vue 父组件给子组件传数据，为什么v-bind 名称可以不一样

 

 
Vue 父组件给子组件传值 减号 大小写
在Vue中，父子组件之间的通信主要通过props来实现。props是父组件用来向子组件传递数据的一种方式。如果你想通过props向子组件传递值，并且涉及到减号（-）或者大小写（camelCase和kebab-case）的使用，这里有一些需要注意的点。

1. 父组件向子组件传递数据
使用camelCase（驼峰命名法）

在父组件中，你可以像这样定义一个prop（以驼峰命名法）：

<template>
  <ChildComponent :myProp="dataValue" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dataValue: 'Hello from parent'
    }
  }
}
</script>

在子组件中，你需要使用camelCase接收这个prop：

<script>
export default {
  props: ['myProp'], // 或者使用对象形式：props: { myProp: String }
  mounted() {
    console.log(this.myProp); // 输出: Hello from parent
  }
}
</script>

使用kebab-case（短横线命名法）

如果你想在HTML模板中使用短横线命名法来传递prop，你应该在父组件中这样写：
<template>
  <ChildComponent :my-prop="dataValue" /> JavaScript不识别短横线。Vue在渲染时会将短横线转换为camelCase
</template>
在子组件中，你仍然使用camelCase来接收这个prop：
<script>
export default {
  props: ['myProp'], // 或者使用对象形式：props: { myProp: String }
  mounted() {
    console.log(this.myProp); // 输出: Hello from parent
  }
}
</script>

2. 子组件向父组件发送事件（非单向数据流）

虽然你的问题主要集中在父向子传值，但了解子向父发送事件也很重要。你可以使用$emit在子组件中触发一个事件，并在父组件中监听这个事件：

// 子组件中触发事件
this.$emit('updateData', newValue);

// 父组件中监听事件
<ChildComponent @updateData="handleUpdateData" />

3. 注意事项和最佳实践：

    始终使用camelCase在JavaScript中定义props，因为JavaScript不识别短横线。Vue在渲染时会将短横线转换为camelCase。

    使用kebab-case在模板中，因为HTML属性名不能包含驼峰命名。这有助于保持模板的清晰和一致性。

    验证props：为了类型安全和更好的维护，你可以在子组件中为props指定类型和默认值。例如：props: { myProp: { type: String, default: 'default value' } }。

通过上述方法，你可以有效地在Vue的父子组件之间进行数据传递。

 

 

 

=========================================================================================