Passing values between parent and child components in Vue

1. Forward transmission, the value is passed from the parent component to the child component. It does not require conditional triggering and is actively transmitted; define props in the child component, and then pass it in the parent component, such as:

//在子组件内定义props
<script>
export default {
  props:['mark','sel']
</script>

<template><!--在父组件内传入mark、sel-->
<Item txts="首页" mark="1" :sel='selected'>
          <img src="../assets/img/1.png" slot="normalimg"/>
          <img src="../assets/img/6.png" slot="activeimg"/>
      </Item>
</template>

 

 

2. Reverse transmission, the value is passed from the child component → parent component, which needs to be triggered by a custom event;

The syntax for throwing custom event listeners:

this.$emit('event',val)
//event:自定义事件的名称
//val:传入的值（可选填，可以不填）

The syntax for accepting custom event listeners on the parent component:

<template>
 <component @event='fn'>
 </component>
</template>
<!--
component:任意组件
event:自定义监听事件的名称
fn:此处的方法名后面不写小括号
-->


<script>
export default{
 methods:{
 fn:function(val){}
 //val:自定义事件从子组件传来的值
 }
}
</script>