vue父子组件传值，props,this.$emit,ref

1. 父子组件传值 ，只涉及普通属性和展示。

解释例子：A.vue 作为子组件，B.vue作为父组件。他们的所处深度一样，即在同一个文件夹下。

• 父组件中需要进行的操作：

  1. 在父组件中引入子组件，如 import comA from "./A.vue"
  2. 在父组件中注册刚刚引入的子组件,如：components:{comA}
  3. 在使用子组件的地方，绑定需要从父组件传递给子组件的属性值：
     如 <com-a :title="msg"></com-a>, 其中，msg是父组件中需要传递给子组件的内容（假设为“哈哈哈”），定义在data中，title则是传递给子组件的属性名，在子组件中需要接收；即父组件中，引入、注册并使用了子组件，并给子组件A.vue传了一个值，其中这个值的名字是title，内容是： “哈哈哈”；

• 子组件接收父组件传值的方式：

  1. 直接接收： props：[ "title" ] , props是一个数组，数组里面的每一个元素是父组件传递过来的属性名，接收后可以当data中定义的属性一样直接使用，<div>{{title}}</div>
  2. 接收的时候验证： props:{ "title":{type:String}} ，这是另一种接收方式， 此时，props是一个对象，它里面的每一个属性都是从父组件传过来的属性名，这里的title就是属性名，这里的type则是该属性值的类型，强调传递的值应该是String类型，它会进行验证，若不是String,会有相应报错。这里还可以设置title的默认值，写法：props:{"title":{ type:String,default:"嘿嘿" } }。
     可以传数据（绑定属性）和方法

• 父组件 B.vue( //*** 后 是我写的注释)

<template>
    <div>
        <h3 style="color:red;">我是父组件的</h3>
        <com-a :title="msg"></com-a>     // *** 使用子组件，并传入title
    </div>
</template>
<script>
import comA from './A.vue'   //***引入子组件A.vue
export default {
  components: { //*** 注册子组件 
    comA
  },
  data () {
    return {
      msg: '哈哈哈'
    }
  }
}
</script>

• 子组件A.vue

<template>
    <div>
        <h3>我是子组件的</h3>
        {{title}} //*** 使用props接收的值
    </div>
</template>
<script>
export default {
  props: ['title'] //*** 接收父组件传递过来的值
}
</script>

效果如图：,其余可自行验证。

2. 父子组件传值 ，有相应的操作，和方法有关 ( 可看做 ，子组件给父组件传值)

解释例子：A.vue 作为子组件，B.vue作为父组件。他们的所处深度一样，即在同一个文件夹下。

• 父组件中需要进行的操作：
  1. 在父组件中引入、注册、使用子组件以及传属性值不再细说
  2. 在使用子组件的时候，用v-on (@也可)绑定一个方法名，值也是一个方法：
     如：<com-a @changeTitleVal="changeTitleVal"></com-a>
     这里@后的changeTitleVal是传递给子组件的方法名，引号中的changeTitleVal，则是在父组件中定义的方法。它俩的名字可相同也可不同。
  3. 在methods中定义一个方法，名为changeTitleVal，如：

changeTitleVal(item){ //*** 这里有没有形参item,取决于子组件是否在使用该方法的时候给父组件传回了值，如果传了值，则这里需定义这个接收的形参item,反之则不需要。
	console.log("data:",item)
}

• 子组件中：
  1. 用 this.$emit触发自定义事件，执行父组件定义的changeTitleVal方法，并给父组件传值：
     如： this.$emit('changeTitleVal', " 我是传回去的item值 " ) ，括号中的前一个参数，是刚刚父组件中定义的方法名，第二个参数是要传的值。
• 例，需求：
  需要在子组件A.vue中，点击一个按钮，然后后将A.vue在data中定义的info值传递给父组件B.vue,并将该info的值赋给B中data中定义的msg 。
• 父组件 B.vue( //*** 后 是我写的注释)

<template>
   <div>
       <h3 style="color:red;">我是父组件的</h3>
       <com-a :title="msg" @changeTitleVal="changeTitleVal"></com-a>
   </div>
</template>
<script>
import comA from './A.vue'
export default {
 components: {
   comA
 },
 data () {
   return {
     msg: '沧海一声笑'
   }
 },
 methods: {
   changeTitleVal (data) {
     this.msg = data
   }
 }
}
</script>

• 子组件A.vue

<template>
    <div>
        <h3>我是子组件的</h3>
        <div>{{title}}</div> 
        <el-button @click="changeText">点击它，info的值传给父组件</el-button>
    </div>
</template>
<script>
export default {
  props: ['title'],
  data () {
    return {
      info: '滔滔两岸潮'
    }
  },
  methods: {
    changeText () {
      this.$emit('changeTitleVal', this.info) 
    }
  }
}
</script>

点击按钮之前：

点击按钮之后：

3. 父组件主动获取子组件的数据和方法：

父组件主动获取子组件的数据和方法：

• 在调用子组件的时候，给子组件v-son定义一个ref,为son

   <v-son ref="son"></v-son>

• 在父组件里面通过：
  this.$refs.son.方法 与this.$refs.son.属性获取； son是ref的值，随取
• 例：父组件 fatherComp.vue:

<template>
  <div class="father_bg">
    <son ref="son"></son>
    <h3><button @click="run">父组件主动获取子组件的数据***********{{msg}}</button></h3>
  </div>
</template>
<script>
import son from './sonComp.vue'
export default {
  name: 'father1',
  components: {
    son
  },
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    run () {
      this.msg = this.$refs.son.msg
    }
  }
}
</script>

• 例：子组件 sonComp.vue:

<template>
  <div class="son_bg">
   <h3>子组件</h3>
  </div>
</template>
<script>
export default {
  name: 'son',
  data () {
    return {
      msg: '这是子组件的数据'
    }
  },
  methods: {

  }
}
</script>

效果图：

4. 子组件主动获取父组件的数据和方法

在子组件内部直接：this.$parent.数据 、 this.$parent.方法

• 例：父组件 fatherComp.vue:

<template>
  <div class="father_bg">
    <son ></son>
    <h3><button @click="run">run</button></h3>
  </div>
</template>
<script>
import son from './sonComp.vue'
export default {
  name: 'father1',
  components: {
    son
  },
  data () {
    return {
      msg: '这是父组件的数据'
    }
  },
  methods: {
    run () {
      alert('这是父组件的run方法')
    }

  }
}
</script>

• 例：子组件 sonComp.vue:

<template>
  <div class="son_bg">
    <h3> <button @click="getFdata"> 这是子组件,主动获取父组件的数据和方法*****{{m}}</button> </h3>
  </div>
</template>
<script>
export default {
  name: 'son',
  data () {
    return {
      m: ''
    }
  },
  methods: {
    getFdata () {
      this.m = this.$parent.msg
      this.$parent.run()
    }
  }
}
</script>

效果图：