vue中传值的方法

最新推荐文章于 2024-04-03 08:36:50 发布

czw2ly

最新推荐文章于 2024-04-03 08:36:50 发布

阅读量3.2k

点赞数 1

分类专栏：组件传值文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/czw2ly/article/details/128192633

版权

1，父传子

父组件通过props向下传递数据给子组件

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}




//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{
 {user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>