Blogger Information
Blog 87
fans 1
comment 0
visits 58552
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue父组件与子组件的数据传递
阿杰
Original
922 people have browsed it

1.父组件引进子组件步骤

(1)先在父组件中声明子组件

  1. components:{
  2. headerVue,
  3. },

(2)在父组件中引入子组件

  1. import headerVue from "../components/Header.vue"

(3)在父组件中使用子组件

  1. <template>
  2. <div class="newCom">
  3. <headerVue ref="header"></headerVue>
  4. </div>
  5. </template>

2.父组件给子组件传递数据的方法

(1)通过props

  • 父组件中给子组件标签绑定传递数据
  1. data () {
  2. return {
  3. parentData:'父组件的值'
  4. };
  5. },
  6. <headerVue ref="header" :msg="parentData"></headerVue>
  • 子组件通过props来接收
  1. props:["msg"],
  2. <div>来自父组件传递的值msg:{{msg}}</div>

(2)父组件通过调用子组件方法给子组件传值

  • 子组件定义要被父组件调用的方法
  1. <div>父组件通过调用子组件方法更改子组件的值age:{{age}}</div>
  2. data () {
  3. return {
  4. age:''
  5. };
  6. },
  7. methods:{
  8. // 父组件触发子组件的init方法
  9. init(age){
  10. this.age = age
  11. }
  12. }
  • 父组件给子组件标签添加ref属性
  1. <headerVue ref="header" :msg="parentData"></headerVue>
  • 父组件通过调用子组件方法传递数据
  1. <el-button @click="changeData">点击触发子组件方法</el-button>
  2. methods:{
  3. changeData(){
  4. // 触发子组件方法,并传参
  5. this.$refs.header.init("18");
  6. }
  7. }

3.子组件给父组件传递数据

通过$emit来实现

  • 在父组件中给子组件标签指定数据绑定的函数@func
  1. <headerVue @func="getMsgFormSon" ref="header" :msg="parentData"></headerVue>
  2. data () {
  3. return {
  4. parentData:'父组件的值',
  5. msgFormSon:''
  6. };
  7. },
  8. methods:{
  9. changeData(){
  10. // 触发子组件方法,并传参
  11. this.$refs.header.init("18");
  12. },
  13. getMsgFormSon(data){
  14. this.msgFormSon = data;
  15. }
  16. }
  • 子组件通过触发$emit提交数据
  1. <el-button @click="sendMsg">给父组件传递数据</el-button>
  2. data () {
  3. return {
  4. age:'',
  5. msg2:'我是子组件的msg'
  6. };
  7. },
  8. methods:{
  9. // 父组件触发子组件的init方法
  10. init(age){
  11. this.age = age
  12. },
  13. sendMsg(){
  14. // func: 父组件指定的数据绑定的函数,this.msg2: 子组件给父组件传递的数据
  15. this.$emit('func',this.msg2);
  16. }
  17. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post