一、Vue2组件传值

1、父组件向子组件传值（props）

• 父组件是通过props属性给子组件传值
• 数据是单向流动父->子（子组件中修改props数据，是无效的，会提示错误）
• 子组件在props中创建一个属性，用于接收父组件传过来的值
• 在子组件标签中添加子组件props中创建的属性
• 将所有传递的值赋值给该属性

代码演示

父组件

<template>
  <div>
    <!-- 父组件 -->
       <child :data="data"></child>
  </div>
</template>

<script>

import child from '../components/child.vue';
export default {
  components: {child},
  data() {
    return {
      data:["wang1","wang2","wang3"],
    };
  },
};
</script>

子组件

<template>
  <div>
    <!-- 子组件 -->
        <div v-for="(item, index) in data" :key="index">{{ item }}</div>
  </div>
</template>

<script>
export default {
    // 接收
    props:["data"],
};
</script>

2、子组件向父组件传值（$emit）

• 在子组件的data里面定义好要传递的数据
• 在子组件的模板里面正常使用该数据
• 子传父一般是通过点击事件等事件传递
• 在子组件methods里面定义this.$emit('点击事件的名字',参数)

代码演示

子组件

<template>
  <div>
       <!-- 子组件 -->
       <input type="text" v-model="name" @change="getClick" />
  </div>
</template>

<script>
export default {
  data() {
    return {
        name:''
    };
  },
  methods: {
    // 点击事件
    getClick(){
        this.$emit('getValue',this.name);
    }
  },
};
</script>

父组件

<template>
  <div>
       <child @getValue="getValue"></child>
        <div>{{ name }}</div>
  </div>
</template>

<script>
import child from '../components/child.vue';
export default {
  components: {child},
  data() {
    return {
      name:'',
    };
  },
  methods: {
    getValue(name) {
      this.name=name
    }
  },
};
</script>

3、兄弟组件传值（$emit/$on）

• 创建一个bus.js
• one组件引入bus.js,并使用emit发送传递的数据
• two组件引入bus.js,并使用on来注册事件，并接受数据
• $on先于$emit

代码演示

bus.js

import Vue from "vue";
export default new Vue();

显示发生事件的页面

<template>
  <div class="home">
    <pageOne></pageOne>
    <pageTwo></pageTwo>
  </div>
</template>

<script>


export default {
  name: 'HomeView',
  components: {
    pageOne:()=>import("@/components/pageOne"),
    pageTwo:()=>import("@/components/pageTwo")
  }
}
</script>

one组件

<template>
  <div>
       <p>兄弟1</p>
        <p @click="btnOne">点击我传递数据</p>
        <p>当前的数字为<span>{{num}}</span></p>
  </div>
</template>

<script>
import bus from '../utils/bus.js';
export default {
  data() {
    return {
        num:0
    };
  },
  methods: {
    btnOne(){
        this.num++;
        bus.$emit('name',this.num);
    }
  },
};
</script>

two组件

<template>
  <div>
       <p>兄弟2</p>
       <p>{{count}}</p>
  </div>
</template>

<script>
import bus from '../utils/bus.js';
export default {
  data() {
    return {
        count:'',
    };
  },

  created(){
    bus.$on('name',(v)=>{
        this.count = v;
    });
  }
};
</script>

二、Vue3组件传值

1、父组件向子组件传值

• 父组件向子组件传值的时候，子组件是通过props来接收的
• 它是以变量的形式将props传递到setup使用

代码演示

父组件

<template>
  <div>
    我是父组件
       <child :info="parentMsg"></child>
  </div>
</template>

<script setup>
import child from './child';
import {ref} from 'vue';
const parentMsg=ref('2005A');

</script>

子组件

<template>
  <div>
       父组件传过来的值:{{ info }}
  </div>
</template>

<script setup>
import {toRefs,defineProps} from 'vue';
const props=defineProps({
    info:String,
})

const {info}=toRefs(props);
</script>

2、子组件向父组件传值

• 子组件向父组件传递值vue3和vue2使用的是$emit,vue3使用的是emit
• vue2是this.$emit('方法名'，'传递的值（根据需求）')，vue3的setup语法是defineEmits

代码演示

子组件

<template>
  <div>
    我是子组件
       <button @click="getClick">点击</button>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';
const emit=defineEmits(['getClick']);
const getClick=()=>{
  let param={
    content:'a'
  }
  // 传递给父组件
  emit('getClick',param);
}
</script>

父组件

<template>
  <div>
      <child @getClick="getClick"></child>
      接收到的是{{ result }}
  </div>
</template>

<script setup>
import child from './child';
import {ref} from 'vue';
const result =ref('');
const getClick=(val)=>{
  console.log(val);
  result.value=val.context;
}
</script>