Vue中的父子传值

lollipops_vc
159 阅读2分钟

首先写好父子组件
子组件:

<template>
  <div class='son'>
      <h3>我是子组件</h3>
  </div>
</template>

父组件:

<template>
  <div id="app">
    <h1>我是app.vue</h1>
    <h2>父传子的案例</h2>
    <Son></Son>
  </div>
  <!-- 需求:在父组件中有一个数据:num,要传入给子组件,子组件将来得到num之后需要渲染到页面上,并且点击一个按钮,修改这个num的值-->
</template>

在父组件中引入子组件,并且在data定义一个属性num,就是我们需要的传入的值

<script>
//导入子组件
import Son from './components/son'
export default {
 data(){
   return {
     num:0
   }
 },
 components: {
   Son,
 }
}
</script>

在页面上把父组件的num值显示出来

<template>
  <div id="app">
    <h1>我是app.vue</h1>
    <h2>父传子的案例</h2>
    <div>父组件中的值:num:{{num}}</div>
    <Son></Son>
  </div>
</template>

为了容易看清楚,给父子组件加上边框

- 父传子
1,在父组件中给导入的子组件定义一个自定义属性(ftos),把num的赋值给这个属性,因为这里是动态传值,采用v-bind绑定,简写为:ftos='num'

<Son :ftos='num'></Son>

2,子组件在自己的页面通过props属性来接收,接受的时候是接收的自定义属性

<script>
export default {
    props:['ftos']
}
</script>

也可以使用对象

props:{
    ftos:{
    type:number,
    default:'默认值'
    }
}

- 子传父
需求:在子组件定义一个按钮,点击让子组件的值加一,并且把子组件的num值再传给父组件

 <button @click="changeNum">点我改变num的值:</button>

一个bug,不能在子组件对num的值进行修改,它只有权利使用,没有权利修改.因为vue有一个很重要的特性,叫做单向数据流特性
官方文档是这样解释的:

假设我们在这里直接对num值进行修改,点击按钮以后控制台会报错

正确的做法:
1,在子组件的data中定义一个属性(mynum),将从父组件接收来的值传给该属性,再在方法中,对mynum进行修改

<script>
export default {
    props:['ftos'],
    data(){
        return {
            mynum:''
        }
    },
    created() {
        this.mynum=this.ftos
    },
    methods: {
        changeNum(){
           this.mynum++
        }
    },
}
</script>

2,不能直接在子组件对num的值进行修改,只能通过子传父,把父组件的num的值改变,来达到效果
子传父,需要在子组件通过emit传给父组件,格式:this.emit('事件名',参数)

methods: {
        changeNum(){
           this.mynum++
        // 将this.mynum的值传给父组件
        this.$emit('changefathernum',this.mynum)
        }
    }

3,父组件接收子组件传过来的值,通过定义一个方法接收

<Son @changefathernum='getNum' :ftos='num'></Son>

直接将子组件传递的值赋值给num

methods: {
   getNum(value){
     this.num=value
   }
 },

现在,点击按钮,就能实现需求了

avatar
文章
阅读
粉丝