Vue中关于父组件和子组件的传值问题

前言

在Vue开发中，经常会用到父子组件传值的问题
vue的组件传值分为三种方式：父传子、子传父、非父子组件传值
父组件子组件传递值主要靠 props属性向下传递
子组件向父组件传递则是利用$emit利用时间向上传递

父组件向子组件传递参数

首先是父组件的页面代码

<template> 
<div id="app"> 
// 父组件中的值
{parentMsg}}
//子组件 ，父组件向子组件传递一个值
<subCompoent :transValueParent='parentMsg'/>  
</div>
</template>
<script>
// 引用子组件
import subCompoent from "./components/subCompoent.vue";
export default {   
 data() {  
   return { 
    parentMsg:'这是父组件的值',
    object: ["1", "2", "3"]
     }  
 }, 
 // 将子组件注册到父组件
 components: {    subCompoent  }};
 </script>

父组件向子组件传递值，需要用v-bind绑定到子组件，同时给定需要传递的值。
注意：

在JavaScript中值类型分为基本类型(number,boolean,string)和引用类型(object,array)
当传递的是基本类型时，当子组件通过事件修改父组件传递过来的值时，并不会影响父组件的值
Vue中并不支持这样做去改变父组件的值，控制台会警告
当父组件传递过来的数组对象，在子组件中修改值，同时父组件的值也会被修改，是地址的引用

子组件的代码

<template>  
<div class="hello">   
     <input type="text" :value="transValueParent" />
    <button @click="changeParentValue">点击</button>  
</div>
</template>
<script>
export default { 
// 子组件接受父组件的值
 props: ["transValueParent"], 
  data() {   
   return {    
     sonMsg: "这是子组件的值"    
     }  
  },  
     methods:{
     changeParentValue(){     
        this.transValueParent = '点击改变的值'
        // this.transValueParent.pop()   
       }  
    }
  }
  </script>

子组件通过 props属性接受父组件传递过来的值，并且可以进行使用

效果图

当我们点击了按钮触发了修改事件的时候，值就会改变，同时控制台会给出警告
当我们对代码进行修改使父组件传递的是引用类型的值时，在点击事件
父组件修改的代码

{object}}
//子组件 ，父组件向子组件传递一个值
<subCompoent :transValueParent='object'/>  
<

子组件修改的代码

changeParentValue(){     
        //this.transValueParent = '点击改变的值'
        this.transValueParent.pop()   
}  
  

当点击了一次按钮，父组件的值也会跟着改变，vue不赞成这么做

子组件通过事件向父组件传值

父组件代码

<template>  
<div id="app">  
	//父组件的值
  <p >{{parentMsg}}</p>
  //子组件 以及传递的事件   
   <subCompoent @getSonValue="getValue($event)"/> 
 </div>
</template>
export default { 
 data() {   
  return {     
   parentMsg: "这是父组件的值",   
   };  
}, 
   methods: {
   // 事件传递后休需要做的事    
   getValue(e) {     
    this.parentMsg = e;   
     }  
  },  
components: {    subCompoent  }};

** 子组件代码**

<template>  
<div class="hello">  
  <input type="text" :value="sonMsg" />   
  // 绑定的修改事件
   <button @click="transSonValue">点击</button>  
 </div>
</template>

 methods:{ 
    transSonValue(){    
    //绑定的事件
      this.$emit('getSonValue',this.sonMsg)  
  }  }

在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数.

在点击了按钮后，触发了$emit事件，同时需要在子组件上挂在父组件需要完成的动作。getSonValue()方法是子组件通过$emit绑定的，而父组件需要执行的methods中的方法getValue同时接受子组件传递过来的值。

在事件触发时，父组件里的值也相应的改变。