vue父子页面互相调用方法及属性 您所在的位置:网站首页 vue获取子组件的变量 vue父子页面互相调用方法及属性

vue父子页面互相调用方法及属性

#vue父子页面互相调用方法及属性| 来源: 网络整理| 查看: 265

一、父页面调用子页面的属性

利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法或属性(注意2.0版本用ref取代了el)

方法1:在插入子组件的地方为子组件定义ref,通过this.$ref.子组件的名称.子组件中的属性名调用子页面中定义的属性。

//父页面中 import Child from './child' export default{ components:{ Child }, mounted(){ console.log(this.$refs.child.flag);//打印子页面中定义的属性的值 } }

二、父页面调用子页面的方法

方法1:在插入子组件的地方为子组件定义ref,通过this.$ref.子组件的名称.子组件中的方法名()调用子页面中定义的方法。

方法2:通过组件的$emit、$on方法

//父组件中 点击调用子组件方法 import Child from './child'; export default { methods: { handleClick() { this.$refs.child.$emit("childmethod")    //子组件$on中的名字 }, }, } //子组件中 我是子组件 export default { mounted() { this.$nextTick(function() { this.$on('childmethods', function() { console.log('我是子组件方法'); }); }); }, };

三、子页面调用父页面的属性

四、子页面调用父页面的方法

方法1:

父级

export default { name: 'App', provide(){ return{ say:this.say } }, methods:{ say(){ alert("这是父页面的方法"); } } }

子级:

点击调用父页面的方法 export default { inject:['say'], methods:{ recv(){ this.say(); } } }

方法2:直接在子组件中通过this.$parent.event来调用父组件的方法

父级

import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } };

子级

点击 export default { methods: { childMethod() { this.$parent.fatherMethod(); } } };

在Vue中,组件实例之间的作用域是孤立的,所以不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据

五、父组件向子组件传递参数(通过props)

父页面

export default{ components:{ child }, data(){ return{ param:"hello" } } }

子页面

{{param}} //这里显示结果为:hello export default{ props:{ param:"" }, }

温馨提示:如上所示,父组件在模板中引用子组件,通过v-bind传递参数param,值为hello,其可以为父组件中的动态属性,同时不用v-bind直接param="hello传递静态值给子组件,则传递的值就是hello字符串。在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign({},myMessage)(在computed中定义),这样子组件的改动将不会影响到父组件。

六、子组件向父组件传递参数(利用事件机制)

子组件通过this.$emit()派发事件,父组件利用v-on进行事件监听,实现参数的传递。

温馨提示:同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层,不然直接在顶层监听子组件的子组件的事件是监听不到的,需要先向父组件派发,父组件在向上层触发

父级

import Child from './child'; export default{ components:{ child }, methods:{ listenFun(param){//监听事件,接收参数 console.log(param);//打印结果:hello } }, }

子级

export default{ methods:{ sendMessage(){ this.$emit("listenFun","hello");//派发事件,传递参数 } }, }

(非原创,引用自:vue组件之间的通信以及如何在父组件中调用子组件的方法和属性 - heshan珊 - 博客园)



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有