vue如何实现父组件向子组件进行传值

这篇文章给大家分享的是有关vue如何实现父组件向子组件进行传值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

父组件向子组件进行传值：

在子组件绑定父的数据，子组件通过props接受参数。

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

//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>

感谢各位的阅读！关于“vue如何实现父组件向子组件进行传值”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！