vue component 值传递

最新推荐文章于 2024-07-25 15:31:54 发布

原创最新推荐文章于 2024-07-25 15:31:54 发布 · 7.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js中组件间的值传递方法。包括从父组件如何通过props向子组件传递数据，以及子组件如何利用this.$emit向父组件传递信息。文中给出了具体的代码示例，帮助开发者理解这一关键特性。

1. 父组件传递给子组件

子组件将需要接收的参数作为props参数。

父组件将data中的值传递给接收参数。

2.子组件传值给父组件

子组件通过v-on声明函数，在函数中使用this.$emit(函数名，data)。

父组件通过v-on声明函数，函数名与子组件相同。父组件在方法中，可以获取到传的参数。

父传子子组件代码：

<template>
  <Menu mode="horizontal" :theme="theme1" active-name="1">
    <MenuItem name="1">
      <Icon type="ios-paper" />
      内容管理
    </MenuItem>
    <MenuItem name="2">
      <Icon type="ios-people" />
      用户管理
    </MenuItem>
    <Submenu name="3">
      <template slot="title">
        <Icon type="ios-stats" />
        统计分析
      </template>
      <MenuGroup title="使用">
        <MenuItem name="3-1">新增和启动</MenuItem>
        <MenuItem name="3-2">活跃分析</MenuItem>
        <MenuItem name="3-3">时段分析</MenuItem>
      </MenuGroup>
      <MenuGroup title="留存">
        <MenuItem name="3-4">用户留存</MenuItem>
        <MenuItem name="3-5">流失用户</MenuItem>
      </MenuGroup>
    </Submenu>
    <MenuItem name="4">
      <Icon type="ios-construct" />
      综合设置
    </MenuItem>
  </Menu>
</template>

<script>

export default {
  name: "meun",
  props:[
      'theme1'
  ]
}
</script>

子传父子组件代码

<template>
  <RadioGroup v-model="theme" @on-change="change">
    <Radio label="light"></Radio>
    <Radio label="dark"></Radio>
    <Radio label="primary"></Radio>
  </RadioGroup>
</template>
<script>
export default {
  data() {
    return {
      theme: 'primary'
    }
  },
  methods:{
    change(data){
      this.$emit('change',data)
    }
  }
}
</script>

父组件代码

<template>
  <div id="app">
    <Menu :theme1='theme'></Menu>
    <radio v-model="theme" @change="change"></radio>

  </div>
</template>

<script>
import Menu from './components/meun.vue'
import radio from "@/components/radio";

export default {
  name: 'app',
  components: {
    Menu,
    radio
  },
  data(){
    return {
      theme:'primary'
    }
  },
  methods:{
    change(data){
      this.theme=data
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>