VUE组件传值-父组件向子组件传值

VUE组件传值-父组件向子组件传值

你好！这是我第一次使用CSDN的博客，工程测绘方向现在的技术学习主要是为了年末毕业论文打基础，目前主要包括Html+css+JavaScript+Arcgis API+Vue。然后在学习中遇到的要点和难点希望能通过在CSDN做笔记的形式记录下里，一开始的话肯定没办法写的特别好，但是希望慢慢进步，这是一步走出去，也希望因为这样可以结识更多同道中人，大家共同进步。

我本人学习vue框架也是自学，在B站上看的一个17年的黑马视频，因为在之前我就直接上手搭建项目框架了，但是因为不熟悉vue的基础，所以代码全都写在了一个vue文件里，所以越来越乱，一狠心决定还是要把vue的组件给搞明白。然后本人学习也是属于指哪打哪，不会了就利用百度谷歌还有github，俗话称基于浏览器的对象编程，所以有不足的地方还希望大家能给些意见和建议。

父组件向子组件传值

子组件中，默认是无法访问到父组件中的data上的数据和method中的方法的。
所以需要进行以下两步操作：
（1）父组件的data中我们定义了一个msg，然后在父组件template中的child子组件标签中，通过属性绑定（v-bind）的形式，把需要传递给子组件的数据，传递到子组件内部。即代码中的v-bind：parentmsg=“msg”。
（2）把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样我们就可以使用这个数据了，在子组件的template中我们就可以在div中加入我们的{{parentmsg}}了。

//父组件 
<template> 
    <div id="app">
        <child v-bind:parentmsg="msg">
        </child>   
    </div> 
</template>    
 <script>
import child from "../src/components/child.vue"

export default
 {  
 name:"app",
 data:function(){
       return{
        msg:"123是父组件中的数据"
        }      
 },     
 components:{
        child      
        }    
 }

//子组件
<template>
    <div>   
        <h1> 这是一个子组件---{{parentmsg}}</h1>
    </div>
</template>
<script>
export default {    
data:function(){        
        return{     
        }      
        },       
	props:[        
	'parentmsg'
	     ] 
}	     
</script>

这里有两点需要注意的就是：
（1）子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的；
（2）组件中的，所有props中的数据，都是通过父组件传递给子组件的，props中的数据都是只读的，无法重新赋值，而data上的数据都是可读可写的。

父组件把方法传递给子组件和子组件传参

（1）首先，先在父组件的methods里面，定义一个show函数。
（2）在父组件的template里面，向子组件标签child传递方法，使用的是事件绑定机制：v-on;当我们自定义一个事件属性之后，这里是(func)，那么，子组件就能够通过某些方式，调用传递进去的这个方法。
（3）在子组件的methods里面，定义一个函数myclick，用的是this.$emit这个方法，其中this指向的是这个child子组件，emit在英语原意为触发、调用的意思。
（4）在子组件的div中，写进去一个type为button的input，绑定一个click事件，这里把method中的myclick传进去。
截止这里，我们的方法就从父组件传递到了子组件，然后我们再把参数从子组件传递到父组件。
（5）在子组件的data中写入一个对象childmsg，并在methods中通过this指向这个对象。
（6）在父组件的data也写一个空对象datamsgFromchild,一开始赋值为空，并在父组件的methods中通过this指向这个对象，令它等于data，这里的data是子组件的data，因为是子组件调用的show函数，所以这里传入的参数也是子组件的data参数。
这样我们就完成了从父组件向子组件传递方法，然后再把子组件的参数传递到父组件这样一个过程。

//父组件
<template>  
    <div id="app">   
        <child v-on:func="show"></child>  
    </div>
</template>
<script>

import child from "../src/components/child.vue"

export default {
  name:"app",
  data:function(){    
      return{
       datamsgFromchild:null    
       }  
  },  
  components:{
       child  
  },  
  methods:{  
  show(data){      
  console.log(this.datamsgFromchild = data)    
       }    
    } 
 }
</script>

<template>    
    <div>        
        <h1>这是一个子组件</h1>        
        <input type="button" value="这是子组件中的按钮，点击它，触发父组件传递过来的func方法" @click="myclick">    
    </div>
</template>

<script>
export default {
  data:function(){       
      return{           
          childmsg:{name:"pe7erj",age:"6"}       
          }   
  },   
   methods:{        
      myclick(){    
          this.$emit('func',this.childmsg)        
          }    
       }
  }
</script>

这就是今天关于子父组件的一个传值关系，之后在实例运用中，有了心得体会会继续分享，因为通过这样一个简单的例子去理解这个肯定还是不够的。