vue调用组件的属性_Vue父子组建之间的传值及父子组件之间相互调用属性或方法...

Vue父子组建之间的传值：

一、父子组建之间的传值

1.1  父组件向子组件传值

父组件向子组件传值是通过属性的方式 传值，传的值可以是任意类型，甚至可以是父组件的方法或者父组件对象本身。为方便理解可以简单将父组件向子组件传值按以下步骤实现。

1. 在父组件中引入子组件；

2. 并在components中注册子组件；

3. 通过属性向子组件中传值。

//1. 引入子组件

import child from'./child.vue'exportdefault{

data() {return{

}

},//2.在父组件的components中注册子组件

components: {

child

},

methods: {

parentFun() {

console.log("这是父组件的方法");

}

}

}

4. 在子组件中国通过props属性接收父组件串过来的数据

父组件通过字符串方式传过来的title --- {{title}}

调用父组件的方法

通过父组件传过来的父组件对象调用的父组件的属性msg --- {{parent.msg}}

data() {return{}

},

props: {/*4. 通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收*/title,

parentFun,

parent

}

}

注： 以上所写的步骤是方便自己的记忆，实际开发中是先设计好子组件，子组件中已经定义好需要父组件在使用子组件时所需要的属性，父组件在调用子组件时按子组件定义的属性传值。

1.2 子组件向父组件传值

子组件向父组件传值是通过自定义事件的方式向父组件传值，为方便理解记忆，可按以下步骤：

1. 在子组件中通过子组件的$emit方法自定义事件向父组件传数据

父组件通过字符串方式传过来的title --- {{title}}

调用父组件的方法

通过父组件传过来的父组件对象调用的父组件的属性msg --- {{parent.msg}}

点击向父组件传值

data() {return{

msg:'这是子组件的msg'}

},

props: {/*4.通过属性接收父组件传过来的数据，属性是parent-fun, props中可以使用parentFun变量接收*/title,

parentFun,

parent

},

methods: {

sendMsgToParent() {//1.子组件通过子定义事件child-msg的方式将msg传给父组件

this.$emit('child-msg',this.msg)

}

}

}

2. 父组件通过监听子组件自定义的事件获取子组件传的值

//1. 引入子组件

import child from'./child.vue'exportdefault{

data() {return{

parentMsg:'这是父组件的msg'}

},//2.在父组件的components中注册子组件

components: {

child

},

methods: {

parentFun() {

console.log("这是父组件的方法");

},

getChildMsg(msg) {

console.log("这就是子组件传过来的msg" +msg)

}

}

}

二、父子组件之间相互调用属性或方法

2.1 父组件调用子组件的属性或方法

父组件在使用子组件时可以通过Vue的ref属性获取到子组件对象，从而调用子组件的属性或方法，如下：

父组件：

//1. 引入子组件

import vChild from'./v-child.vue'exportdefault{

data() {return{}

},

components: {

vChild

},

methods: {

useChildMsg() {//2.通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法

let child= this.$refs.vChild

console.log(child.msg); //调用子组件的属性

child.showMsg() //调用子组件的方法

}

}

}

子组件：

这是v-child组件

data() {return{

msg:'这是子组件的msg'}

},

methods: {

showMsg() {

alert("这是v-child组件")

}

}

}

2.2 子组件调用父组件的属性或方法

子组件调用父组件的方法或属性可以直接通过子组件对象的$parent属性获取父组件对象，从而调用父组件的属性或方法。如下：

子组件：

这是v-child组件

data() {return{

msg:'这是子组件的msg'}

},

methods: {

showMsg() {

alert("这是v-child组件")

},

getParentMsg() {

let parent= this.$parent;//1.获取父组件对象

console.log(parent.msg);//2.调用父组件的属性

parent.showMsg()//3.调用父组件的方法

}

}

}

父组件：

//1. 引入子组件

import vChild from'./v-child.vue'exportdefault{

data() {return{

msg:'这是父组件的msg'}

},

components: {

vChild

},

methods: {

useChildMsg() {//2.通过DOM节点获取子组件对象，然后通过子组件对象调用子组件的属性或方法

let child= this.$refs.vChild

console.log(child.msg);//调用子组件的属性

child.showMsg()//调用子组件的方法

},

showMsg() {

alert('这是父组件的showMsg)

}

}

}

三、总结

3.1 父子组件之间传值

父组件向子组件传值：通过属性传入，子组件通过props定义与传入属性相同的变量接收；

子组件向父组件传值：通过子组件的$emit自定义事件，父组件通过监听子组件定义的事件获取子组件传的值；

3.2 主动调用子组件或主动调用父组件的属性或方法

父组件主动调用子组件的属性或方法：通过父组件的$refs.子组件的ref属性值 来获取子组件对象，从而调用子组件的属性或方法；

子组件主动调用父组件的属性或方法：通过子组件的$parent 获取父组件对象，从而调用父组件的属性或方法