Vue

Vue - 组件数据交互

Posted on 12-08 2019,6 min read

Vue - 组件数据交互


Organized by安南 City

Completion time2019-12-08

Send error to emailcity@nanzc.com


组件系统中的独立可复用组件之间,如何相互访问进行数据的交互呢?

我们将使用比较直观的 模块系统 为大家展示。

 

子组件访问父组件


首先来看 子组件 如何访问 父组件

 

Props(推荐)


props父组件 通过 props 属性向 子组件 传数据和方法

父组件

<template>
	<div id="parent">
        <!-- 3.向子组件传递数据,属性使用短横线命名 -->
        <child :child-data="parentData" :child-method="parentMethod"></child>
    </div>
</template>

<script>
    // 1.导入子组件
    import child from "./child"
    
    export default {	
        data(){
            return{
                parentData: "父组件数据"
            }
        },
        methods: {
            parentMethod(){
                console.log("父组件方法")
            }
        }
        // 2.注册子组件
        components:{
            child
        }
    }
</script>

子组件

<template>
	<div id="child">
        <!-- 2.使用父组件数据 -->
        {{ childData }}
        <button @click="childMethod">调用父组件方法</button>
    </div>
</template>

<script>
    export default {
        // 1.使用 props 属性接收,使用驼峰命名
        props: ["childData", "childMethod"]
    }
</script>

 

Parent


vm.$parent:父实例对象

子组件通过实例对象的 $parent属性访问 父组件 的数据和方法

父组件

<template>
	<div id="parent">
        <!-- 3.向子组件传递数据,属性使用短横线命名 -->
        <child :child-data="parentData" :child-method="parentMethod"></child>
    </div>
</template>

<script>
    // 1.导入子组件
    import child from "./child"
    
    export default {	
        data(){
            return{
                parentData: "父组件数据"
            }
        },
        methods: {
            parentMethod(){
                console.log("父组件方法")
            }
        }
        // 2.注册子组件
        components:{
            child
        }
    }
</script>

子组件

<template>
	<div id="child">
        <!-- 1.使用父组件数据 -->
        {{ this.$parent.parentData }}
        <button @click="childMethod">调用父组件方法</button>
    </div>
</template>

<script>
    export default {
        methods: {
            // 2.定义子组件方法
            childMethod(){
                // 3.使用父组件方法
                this.$parent.parentMethod()
            }
        }
    }
</script>

 

Emit


vm.$emit

  • Type: Function
  • Description: 通过$emit触发当前实例上的事件
  • Use: vm.$emit( eventName, […args] )

父组件

<template>
	<div id="parent">
        <!-- 3.向子组件传递数据,属性使用短横线命名 -->
        <child :child-method="parentMethod"></child>
    </div>
</template>

<script>
    // 1.导入子组件
    import child from "./child"
    
    export default {	
        methods: {
            parentMethod(str){
                console.log("父组件方法", "参数:" + str)
            }
        }
        // 2.注册子组件
        components:{
            child
        }
    }
</script>

子组件

<template>
	<div id="child">
        <!-- 3.单击时调用方法 -->
        <button @click="childMethod">调用父组件方法</button>
    </div>
</template>

<script>
    export default {
        methods: {
            // 1.定义子组件方法
            childMethod(){
                 // 2.通过 $emit 调用父组件 parentMethod 事件绑定方法并传入值
        		this.$emit('parentMethod', 'hello');
            }
        }
    }
</script>

 

父组件访问子组件


有什么 父组件 访问 子组件的方法呢?

我们在 父组件 中使用子组件标签时,使用 ref 属性注册子组件引用信息

调用时使用实例属性 $refs 访问已注册引用信息,通过引用信息访问 子组件

 

Ref


ref:被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上

vm.$refs

  • Type: Object
  • Description: 一个对象,持有注册过 ref 的所有 DOM 元素和组件实例。

子组件

<template>
	<div  id="child">
    	Child
    </div>
</template>
 
<script>
    export default {
        name: "child"
        methods: {
            childMethod(str) {
                console.log("子组件方法", "参数:" + str)
            }
        }
    }
</script>

父组件

<template>
  <div id="parent">
    <button @click="clickparent">调用子组件方法</button>
     <!-- 3.使用 ref 注册子组件引用信息 -->
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
    // 1.导入子组件
    import child from './child';
    
    export default {
        name: "parent",
        methods: {
          	// 4.定义父组件方法
          	clickparent() {
            	// 5.使用 $refs 调用子组件 childMethod 方法
            	this.$refs.mychild.childMethod("Hello Child");
          	}
        },
        // 2.注册子组件
        components: {
          	child
        }
    }
</script>

 

非父子组件交互


在非父子组件中,我们可以依托于事件中心进行事件处理。

也就是在事件中心注册事件进行托管,可以根据需求封装成事件处理中心,此处只介绍基本使用。

详细:实例方法-事件

// 事件中心:创建独立的事件中心,用以管理组件间的通信
const hub = new Vue()

// 注册:
hub.$on("event-name", function(value...) {})

// 调用:
hub.$emit("event-name", value...)

// 销毁:
hub.$off("event-name")

 

访问根实例


组件众多,我们可以使用实例的 $root 属性访问根实例。

vm.$root当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

 

下一篇: TCP协议