IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【Vue2和Vue3父子组件传值】 -> 正文阅读

[JavaScript知识库]【Vue2和Vue3父子组件传值】

Vue2中的父子组件传参:

父传子

props:在父组件中,给子组件绑定一个自定义属性,在子组件中,通过props进行接收

子传父

自定义事件:在父组件中,给子组件绑定一个自定义事件,绑定事件的值为接收参数的函数,在子组件中,通过$emit发送数据

Vue3中的父子组件传参:

vue3中,新增了setup语法糖,父组件中引入子组件后,不需要注册可直接使用。父传子时,子组件中通过defineProps方法接收,子传父时,子组件中通过defineEmits方法发送。

Vue2父子组件传值

vue2父传子

在父组件中的子标签中定义一个 :属性名=属性值,在子组件中用props接收

父组件:

<template>
  <div>
    <div>父组件</div>
    <sonOne :msg="msg"></sonOne>
  </div>
</template>

<script>
import sonOne from "@/components/sonOne";

export default {
  name: "fatherView",
  components:{
    sonOne
  },
  data(){
    return{
      msg:'父组件传到子组件的值'
    }
  }

}
</script>

<style scoped>

</style>

子组件:

<template>
<div>
  子组件
  {{msg}}
</div>
</template>

<script>
export default {
name: "sonOne",
  props:{
    msg:[String,Number],
  },
  created() {
    console.log(this.msg)
  }
}
</script>

<style scoped>

</style>

vue2子传父

在父组件的子标签中写自定义事件,在子组件中用this.$emit(‘自定义事件名’,传递的值)传值

父组件:

<template>
  <div>
    父组件
    <sonTwo @change="change"></sonTwo>
  </div>
</template>

<script>
import sonTwo from "@/components/sonTwo";

export default {
  name: "fatherOneView",
  components: {
    sonTwo
  },
  methods:{
    change(data){
      console.log(data)
    }
  }
}
</script>

<style scoped>

</style>

子组件:

<template>
<div>
  子组件
  <button @click="click">按钮</button>
</div>
</template>

<script>
export default {
  name: "sonTwo",
  created() {

  },
  methods:{
    click(){
      this.$emit('change','子组件传到父组件的值')
    }
  }
}
</script>

<style scoped>

</style>

Vue3父子组件传参

Vue3父传子

在父组件中的子标签中定义一个 :属性名=属性值,在子组件中用defineProps接收

父组件:

<template>
  <div>
    父组件
    <sonOne :msg="msg"></sonOne>
  </div>
</template>

<script setup lang="ts">
import sonOne from '../components/sonOne.vue'
import {ref} from 'vue'
let msg = ref('父组件传给子组件的值')
</script>

<style scoped>

</style>

子组件:

<template>
  <div>
    子组件
    {{ msg }}
  </div>
</template>

<script setup lang="ts">
defineProps<{
  msg:[]
}>()

</script>

<style scoped>

</style>

Vue3子传父

在父组件的子标签中写自定义事件,在子组件中写一个点击事件,再定义emit,emit的第一个参数是父组件的方法,第二参数就是需要传递的值

父组件:

<template>
  <div>
    父组件
    <sonTwo @change="change">按钮</sonTwo>
    {{msg}}
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import sonTwo from "../components/sonTwo.vue";
let msg = ref('')
const change = (data) => {
  console.log(data);
  msg.value = data
};
</script>

<style scoped>

</style>

子组件:

<template>
  <div>
    子组件
    <button @click="send">按钮</button>
  </div>
</template>

<script setup lang="ts">

const emit = defineEmits(['change'])
const send=()=>{
  emit('change','子组件传给父组件的值')
}

</script>

<style scoped>

</style>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 10:59:18  更:2022-12-25 11:01:27 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 19:22:58-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码