vue.js 如何父传子? 下面本篇文章给大家介绍一下 vue.JS 中父传子的传值方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
引用官网的一句话: 父子组件的关系可以总结为 prop 向下传递, 事件向上传递. 父组件通过 prop 给子组件下发数据, 子组件通过事件给父组件发送消息
父组件向子组件进行传值
父组件:
- <template>
- <div class="hello">
- <child :inputValue = 'value'></child>
- </div>
- </template>
- <script>
- import child from './child'
- export default {
- data () {
- return {
- value:'我是父组件的 value'
- }
- },
- components:{child}
- }
- </script>
子组件:
<template> <div> <span>{{inputValue}}</span> </div> </template> <script> export default { props:{ inputValue:String } }
父组件向子组件传值成功
总结一下:
子组件在 props 中创建一个属性, 用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件 props 中创建的属性
把需要传给子组件的值赋给该属性
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/18324.html