vue3 父组件向子组件传递数字

父组件向子组件传递数字可以使用props属性，具体步骤如下：

1. 在父组件中定义一个数字变量num：

<template>
  <div>
    <child-component :child-num="num"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 123
    }
  }
}
</script>

2. 在子组件中定义props属性，接收父组件传递的数字变量：

<template>
  <div>{{ childNum }}</div>
</template>

<script>
export default {
  props: {
    childNum: {
      type: Number,
      required: true
    }
  }
}
</script>

3. 在父组件中使用子组件，并将num作为属性传递给子组件：

<template>
  <div>
    <child-component :child-num="num"></child-component>
  </div>
</template>

这样就可以实现父组件向子组件传递数字了。

相关问题

vue3父组件向子组件传递参数

在Vue 3中，父组件向子组件传递参数的方式主要有以下两种：

1.使用v-bind绑定数值，然后通过props在子组件中接收使用。具体步骤如下：[^1]

- 在父组件中，使用v-bind将数值绑定到子组件上：

<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: '父组件向子组件传参示例'
    }
  }
}
</script>

- 在子组件中，使用props定义接收的属性名称，然后通过template中的插值语法将props中的数值显示出来：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    return {
      message: props.message
    }
  }
}
</script>

2.使用defineProps在子组件中定义props属性，然后在父组件中通过v-bind绑定数据到子组件的props属性中。具体步骤如下：

- 在子组件中，使用defineProps定义props属性接收父组件传递的参数：

<template>
  <div>
    <p>{{ type }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  emits: ['update:type'],
  props: defineProps({
    type: {
      type: String,
      default: 'edit'
    }
  }),
  methods: {
    updateType() {
      this.$emit('update:type', 'update');
    }
  }
}
</script>

- 在父组件中，使用v-bind绑定数值到子组件的props属性中，并在需要更新时使用v-on监听子组件的自定义事件来进行更新。

<template>
  <div>
    <child-component :type="type" @update:type="handleUpdate"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      type: 'edit'
    }
  },
  methods: {
    handleUpdate(data) {
      this.type = data;
    }
  }
}
</script>

vue3父组件向子组件传递方法

在Vue3中，父组件向子组件传递方法可以通过两种方式实现：

1.使用props属性将方法传递给子组件，然后在子组件中调用该方法。具体实现步骤如下：

①在父组件中定义一个方法，并将该方法作为props属性传递给子组件：

<template>
  <div>
    <child :myMethod="parentMethod"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    parentMethod() {
      console.log('这是父组件的方法');
    }
  }
}
</script>

②在子组件中通过props接收该方法，并在需要的地方调用该方法：

<template>
  <div>
    <button @click="callParentMethod">调用父组件的方法</button>
  </div>
</template>

<script>
export default {
  props: {
    myMethod: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentMethod() {
      this.myMethod();
    }
  }
}
</script>

2.使用$emit方法触发父组件中的方法。具体实现步骤如下：

①在父组件中定义一个方法，并将该方法作为props属性传递给子组件：

<template>
  <div>
    <child @my-event="parentMethod"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    parentMethod() {
      console.log('这是父组件的方法');
    }
  }
}
</script>

②在子组件中通过$emit方法触发父组件中的方法：

<template>
  <div>
    <button @click="$emit('my-event')">调用父组件的方法</button>
  </div>
</template>