vue子传父和父传子———vue怎么父传子，vue怎么子传父

前提是父组件导入的是对应的子组件

否则天王老子来了，也是没法实现

父传子

在你创建页面的时候就有，父传子
msg是传给子组件的变量，属性值是父组件传给子组件的内容（数据）

父组件页面内容

<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

效 果 图

子组件

props和name平级

  props: {
    msg: String,
  },

效 果 图

子传父

思路：
在组件用this.$emit(方法名，需要传递的参数)
父组件通过标签事件和方法接收

子页面

页面

<button @click="Clickmsg">我想传给父组件</button>

方法 / methods

    Clickmsg () {
      console.log(this.datall);
      this.$emit('fatherFun','我是子组件的内容')
    }

效 果 图

父页面

@子组件定义的方法名，属性值是接受的函数

页面

<HelloWorld @fatherFun="Funmsg" msg="Welcome to Your Vue.js App"/>
{
   
   {dataMsg}}

方法 / methods

Funmsg (othen) {
      console.log(othen);
      this.dataMsg =othen
    }

效 果 图

下一篇写vue3的父子传参

人们往往为了逃避一个错误而去犯另外一个错误，既然很多错误都没法回避，何必让痛苦埋葬你的人生呢？与其逃来逃去，还不如去面对一个，你说呢？