vue子组件数据怎么用-Vue.js-PHP中文网

vue子组件数据怎么用

下次还敢

发布： 2024-05-26 23:18:22

原创

515人浏览过

Vue 子组件数据独立于父组件，只能访问通过 props 传递的数据。父组件使用 v-bind 指令和 props 选项向子组件传递数据。子组件使用 $attrs 访问除 props 声明外的父组件属性。子组件通过自定义事件向父组件传递数据。

vue子组件数据怎么用

Vue 子组件数据使用

在 Vue.js 中，子组件的数据与父组件的数据是分开的。子组件只能访问父组件通过 props 属性传递给它的数据。父组件可以通过 v-bind 指令向子组件传递数据。

使用 Props 传递数据

在子组件中，使用 props 选项指定需要接收的数据：

立即学习“前端免费学习笔记（深入）”；

<code class="javascript">export default {
  props: ['data']
};</code>

登录后复制

在父组件中，使用 v-bind 指令传递数据：

<code class="html"><template>
  <ChildComponent v-bind:data="myData"></ChildComponent>
</template>

<script>
export default {
  data() {
    return {
      myData: 'Hello Vue!'
    }
  }
};
</script></code>

登录后复制

使用 $attrs 访问额外属性

除了 props 之外，子组件还可以通过 $attrs 访问父组件传递的其他属性，这些属性没有在 props 中显式声明。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

在子组件中：

<code class="javascript">export default {
  mounted() {
    console.log(this.$attrs.extraAttribute);
  }
};</code>

登录后复制

在父组件中：

<code class="html"><template>
  <ChildComponent v-bind:data="myData" extra-attribute="foo"></ChildComponent>
</template></code>

登录后复制

使用自定义事件

如果子组件需要向父组件传递数据，可以使用自定义事件。

在子组件中：

<code class="javascript">export default {
  methods: {
    emitData() {
      this.$emit('update-data', 'New data');
    }
  }
};</code>

登录后复制

在父组件中：

<code class="html"><template>
  <ChildComponent @update-data="handleData"></ChildComponent>
</template>

<script>
export default {
  methods: {
    handleData(newData) {
      // 处理新数据
    }
  }
};
</script></code>

登录后复制

以上就是vue子组件数据怎么用的详细内容，更多请关注php中文网其它相关文章！