父组件向子组件传递数据

在Vue.js中，可以通过props属性将父组件的数据传递给子组件。然后在子组件中，可以通过监听父组件传递的数据，实时更新子组件的视图。

以下是一个示例代码：

父组件：

<template>
  <div>
    <button @click="addData">添加数据</button>
    <child-component :childData="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: [] // 父组件的数据
    };
  },
  methods: {
    addData() {
      this.parentData.push('新数据'); // 点击按钮时，向父组件的数据中添加新数据
    }
  },
  components: {
    ChildComponent
  }
};
</script>

子组件：

<template>
  <div>
    <ul>
      <li v-for="item in childData" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['childData'] // 接收父组件传递的数据
};
</script>

在父组件中，点击按钮时，会调用addData方法，向父组件的数据parentData中添加新数据。然后将parentData通过props属性传递给子组件。

在子组件中，通过使用v-for指令循环遍历childData，将每个数据项渲染到页面上。

这样，当父组件点击按钮添加数据时，子组件会实时更新视图，显示最新的数据。

props 完整的写法是什么？需要类型和默认值等内容的写法

下面是props的完整写法，包括类型和默认值：

props: {
  propName: {
    type: Type, // 属性的类型，例如：String, Number, Boolean, Object, Array等
    default: DefaultValue // 属性的默认值
    required: Boolean, // 是否必需，默认为false
    validator: Function // 自定义验证函数
  }
}

其中，propName是属性名，Type是属性的类型，DefaultValue是属性的默认值。

以下是一个示例：

props: {
  message: {
    type: String,
    default: '默认消息',
    required: true,
    validator: function(value) {
      // 自定义验证函数，返回true表示验证通过，返回false表示验证不通过
      return value.length <= 10;
    }
  }
}

在上述示例中，message是属性名，类型为String，如果父组件没有传递message属性时，它的默认值为'默认消息'。required属性设置为true，表示该属性是必需的，如果父组件没有传递该属性，将会在控制台输出警告。validator属性是一个自定义的验证函数，用于验证message属性的值是否符合要求，如果返回false，将会在控制台输出警告。

下面在vscode爆红Type of the default value for 'taskFlowData' prop must be a function.

 props: {
    taskFlowData: {
      type: Object,
      default: {},
      required: true
    }
  },

在Vue.js中，当使用对象或数组作为默认值时，需要将默认值设为一个函数，而不是直接使用对象或数组字面量。这是因为对象或数组在JavaScript中是引用类型，如果直接使用对象或数组字面量作为默认值，将会导致它们在不同组件实例之间共享，可能会造成数据混乱。

所以，你可以将default属性的值改为一个函数，返回一个新的对象：

props: {
  taskFlowData: {
    type: Object,
    default: function() {
      return {};
    },
    required: true
  }
}

这样做可以确保每个组件实例都有自己独立的taskFlowData对象。