【vue】组件传值

组件传值

子组件向父组件传值

子组件通过调用父组件的方法给父组件传值:子组件的自定义事件中,用$emit触发事件调用父组件方法给父组件传值
父组件嵌套的组件：

<div>
	<Box></Box>
</div>

子组件的内容为：

<div>
	<p>我是子组件</p>
	<p>{{age}}</p>
	<button></button>
</div>

点击按钮将子组件的age内容传给父组件
子组件：
为 button 绑定 click 事件

<button @click="submit"></button>

当触发点击事件时,在函数中使用 $emit

submit () {
	this.$emit('childFn',this.message)
}

其中 $emit 中的两个参数，第一个为父组件的事件，第二个为想要传的值
父组件：
在引用子组件的位置，写入事件

<div>
	<button @childFn="parentFn"></button>
</div>

在 parentFn() 函数中，写入传的参数，获取子组件中 age 的值：

parentFn (age) {
	this.arr = age
}

父组件向子组件传值

父组件通过属性给子组件传值: 子组件的props接受数据
父组件代码

<template>
  <div>

    <Nav :msg="msg"></Nav>
    
  </div>
</template>

<script>
  import Nav from "@/com/Nav.vue"
export default {
  data() {
    return {
      msg:"app父组件上的内容"
    }
  },
  methods:{
  },
  components: {
    Nav
  },
  
};
</script>

子组件代码

<template>
    <div>
     <p>{{msg}}</p>
    </div>
</template>
<script>
export default {
    // 可以传多个值
     props:["msg"],
    data() {
        return {
        };
    },
   methods:{
   }
}
</script>

注意：因为通过属性传值是单向的,有时候我们需要子组件的data 数据需要交给父组件使用:
通过在子组件上定义自定义事件，在子组件中通过$emit 来触发事件；子组件的事件被触发并传参，事件处理函数可以接收到子组件的数据；事件绑定的事件处理函数在父节点上，故可在事件处理函数中用到子组件的数据值来修改父节点的数据。