Vue父子组件传值的方法

• 父组件向子组件传值用props(properties属性)接收

• 子组件向父组件传值用this.$emit()发送

  子组件

<template>
<div>
  <h1>{{message1}}</h1>//这里是子组件要显示的标题
  <button @click="message2">子组件传值给父组件</button>
</div>
</template>

<script>
export default {
  name: "Fatherson",
  data(){
    return{
    }
  },
  props:{
    message1:String,//props这里定义属性的类型，props是属性集合。
  },
  methods: {
    message2(){
      this.$emit("message3",'我来自子组件')//这里通过$emit()这个通道将‘我来自子组件’传给父组件。
    }
  }
}
</script>

<style scoped>

</style>
js

父组件

<template>
  <div id="app">
    <Fatherson :message1="father" @message3="message4"></Fatherson>//：massage1绑定子组件。@message3接受子组件的方法，将其命名为message4。然后调用,将子组件的值传过来。message4后面没有括号。
 </div>
</template>

<script>
import Fatherson from "@/components/Fatherson";
  export default {
 name: 'app',
 components: {
     Fatherson
 },
 data(){
   return {
     text: "abc",
     father:'父组件传值给子组件',//将这个值传给子组件。
   }
 },
    methods:{
   message4(data){
     console.log(data)//这里打印的是子组件传过来的值
   }
    }
}
</script>

<style>
</style>
js

父组件主动获取子组件的方法

• 调用子组件的时候定义一个ref

   	 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
js

ref=“ruleform”:将ruleform传给ref

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
js

this.$refs[formName]获取数据

父组件主动调用子组件的数据（这是单独有一个父组件和子组件）

先在父组件定义一个ref.

父组件：<Table :tableData="formdata" ref="Table"></Table>
js

ref=“Table”：将Table的数据传给ref

父组件： getChild (){
        console.log(this.$refs.Table.x)
      },

 子组件：data() {
    return {
      x: '我是子组件的数据，你已经主动获取了我的数据',
csp

this.$refs.Table.x：通过这个将子组件Table里的x数据传给父组件。

总结：在父组件中通过

this.$refs.（ref的定义名）Table.属性
this.$refs.（ref的定义名）Table.方法
js

来获取子组件的数据或者方法

子组件主动调用父组件的数据（这是单独有一个父组件和子组件）

在子组件中通过

this.$parent.属性
this.$parent.方法
js

获取父组件的数据跟方法

子组件中：getparent(){
  console.log(this.$parent.parents)
  this.$parent.run()
},
js

父组件中：
parents:'我是父组件的数据，儿子，你已经成功获取了我',

run(){
     console.log('我是父组件的方法')
      }
    }
js

这样子组件就能获取父组件的数据跟方法。