首页vue3 子传父方法

vue3 子传父方法

时间: 2023-11-08 13:55:08 浏览: 161

Vue子传父案例

5星 · 资源好评率100%

一.html {{item.name}} 二.script //子组件 const cpn ={ template:#cpn, data () { return { movies:[ {id : aaa , name : 家用电器}, {id : bbb , name : 数码宝贝}, {id : ccc , name : 硕果累累}, {id : ddd , name : 南拳北斗}, ] } }, 在Vue.js框架中，父子组件通信是常见的场景。在这个名为“Vue子传父案例”的示例中，我们看到如何从子组件向父组件传递数据，即所谓的“子传父”通信方式。我们来详细了解这个例子的组成部分。 1. **HTML结构（一.html）**： ```html  <cpn @itemclick="cpnClick"></cpn> ``` 在HTML模板中，`<cpn>` 是子组件的标签，通过 `@itemclick` 监听器绑定了一个名为 `cpnClick` 的方法，这是父组件接收子组件事件的方式。当子组件触发 `itemclick` 事件时，会调用父组件的 `cpnClick` 方法，并将传递的参数（item）传递给它。 2. **子组件（二.script）**： ```javascript const cpn = { template: '#cpn', data() { return { movies: [ { id: 'aaa', name: '家用电器' }, { id: 'bbb', name: '数码宝贝' }, { id: 'ccc', name: '硕果累累' }, { id: 'ddd', name: '南拳北斗' }, ] } }, methods: { btnClick(item) { // 发射事件 this.$emit('itemclick', item); } } }; ``` - **template**：子组件的模板，虽然在这里没有给出具体的HTML，但可以假设有一个按钮或者列表项，用于触发 `btnClick` 方法。 - **data**：定义了子组件的数据，包括一个名为 `movies` 的数组，包含了四个对象，每个对象包含 `id` 和 `name` 属性。 - **methods**：定义了 `btnClick` 方法，当用户操作（比如点击按钮）时触发。该方法使用 `$emit` 函数来触发自定义的 `itemclick` 事件，并将当前选中的 `item` 作为参数传递。 3. **父组件（二.script）**： ```javascript const app = new Vue({ el: '#app', data: { message: '哈哈', }, components: { cpn }, methods: { cpnClick(item) { console.log('cpnClick', item); } } }); ``` - **el**：父组件的挂载点，这里选择ID为 `app` 的元素。 - **data**：定义了父组件的数据，包含一个 `message` 字段，但在这个案例中并未使用。 - **components**：注册子组件 `cpn`，使得可以在父组件模板中使用。 - **methods**：定义了 `cpnClick` 方法，这个方法会在子组件触发 `itemclick` 事件时被调用，接收子组件传递的 `item` 参数，然后打印到控制台。总结这个案例的关键知识点： - **Vue组件**：Vue.js中的组件是可复用的代码块，可以用来构建复杂的UI。 - **子组件向父组件通信**：使用 `this.$emit` 触发自定义事件并传递数据，父组件通过 `@event`（事件监听器）监听并处理事件。 - **data**：组件的数据对象，用于存储组件的状态。 - **methods**：组件的方法，定义可执行的函数。 - **$emit**：Vue实例的内置方法，用于触发自定义事件。 - **事件修饰符**：`@` 符号用于监听事件，相当于 `v-on`。 - **组件注册**：通过 `components` 对象在父组件中注册子组件，使其能在父组件的模板中使用。这个案例展示了Vue.js中基础的父子组件通信机制，对于理解和应用Vue.js开发复杂交互的应用至关重要。在实际项目中，你可以根据需要扩展这个案例，例如添加更多的数据处理、事件逻辑以及视图更新等。

在Vue 3中，子组件向父组件传递方法的方式有多种。其中一种常见的方式是通过使用`emit`函数来触发父组件中定义的事件。具体步骤如下： 1. 在父组件中，使用`@`符号绑定一个自定义事件，并指定一个方法来处理该事件。例如：`@changeNavfu="changeNav"` 2. 在子组件中，通过`setup`函数中的`emit`参数，使用`emit`函数向父组件发送事件。例如：`emit('changeNavfu', { data: isCollapse.value })` 3. 父组件中的事件处理方法会接收子组件传递的数据作为参数。在父组件中，可以在该方法中对数据进行处理。例如：`const changeNav = (val) => { changeNavFu.value = val.data }` 这样，子组件就能够将数据传递给父组件，并且父组件可以在相应的事件处理方法中对数据进行操作。

阅读全文