vue 组件通信传值 父传子 子传父

vue 组件通信传值 父传子 子传父

我们知道vue的特点就是组件化开发,说到组件化开发 必定少不了的就是组件之间的通信传值了,说到组件之间的通信你有知道多少呢?

1. 父传子
2. 子传父

一.父传子

现在有两个组件
== parent.vue ==
== child.vue ==
** parent.vue中 **

<template>
    <div class="app">
      <!-- // 父组件   -->
      <!-- //注意这里是 v-model 达到动态传值的效果 -->
      <child :func="getParentMsg"/>
    </div>  
</template>
<script>
import child from './child.vue'
export default {
     
    name: Parent,
    components: {
     
        child 
    }
     data() {
     
        return {
      
        	getParentMsg:"我是父组件的值"
        }
     }    
}         

** child.vue中 **

<template>
    <div class="app">
      <!-- // 子组件   -->
      <p>{
     {
      getParentMsg }}</p>
    </div>  
</template>
<script>
export default {
     
     name: Child,
     // 这里用prop接收就行了,然后直接可以在上面用
     prop:['getParentMsg'] 
     data() {
     
        return {
      
        }
     }    
}         

小结:
(1) 子组件在props中创建一个属性，用以接收父组件传过来的值
(2) 父组件中注册子组件
(3) 在子组件标签中添加子组件props中创建的属性
(4) 把需要传给子组件的值赋给该属性

二.子传父

** child.vue中 **

<template>
    <div class="app">
      <!-- // 子组件   -->
      <p @click="sendParent"></p>
    </div>  
</template>
<script>
export default {
     
     name: Child,
     data() {
     
        return {
      
            // 在这里定义要传给父组件的值
        	childMsg:"我是子组件的值"
        }
     }
     methods:{
     
     	sendParent(){
     
     	    // func 这个是父组件指定的传数据的函数,this.childMsg 这个是要传给父组件的值
     		this.$emit("func", this.childMsg)
     	}
     }    
}         

** parent.vue中 **

<template>
    <div class="app">
      <!-- // 父组件   -->
      <!-- //注意这里是 v-on -->
      <child @func="getParentMsg"/>
    </div>  
</template>
<script>
import child from './child.vue'
export default {
     
    name: Parent,
    components: {
     
        child 
    }
     data() {
     
        return {
      
        }
     } 
     methods:{
     
        // 传参接收 子组件的值
     	getParentMsg(val){
     
     	    // 此时的val 就是子组件传过来的值
     		console.log(val,"val")
        }
     }   
}         

小结:
(1) 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
(2) 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
(3) 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
(4) 在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

敬请期待: 下篇将会更新 vue项目做一键复制页面内容到粘贴板功能