1. 父子组件传值 ,只涉及普通属性和展示。
解释例子:A.vue 作为子组件,B.vue作为父组件。他们的所处深度一样,即在同一个文件夹下。
-
父组件中需要进行的操作:
- 在父组件中引入子组件,如
import comA from "./A.vue"
- 在父组件中注册刚刚引入的子组件,如:
components:{comA}
- 在使用子组件的地方,绑定需要从父组件传递给子组件的属性值:
如
<com-a :title="msg"></com-a>
, 其中,msg
是父组件中需要传递给子组件的内容(假设为“哈哈哈
”),定义在data
中,title
则是传递给子组件的属性名,在子组件中需要接收;即父组件中,引入、注册并使用了子组件,并给子组件A.vue
传了一个值,其中这个值的名字是title,内容是: "哈哈哈
";
- 在父组件中引入子组件,如
-
子组件接收父组件传值的方式:
- 直接接收:
props:[ "title" ]
,props
是一个数组,数组里面的每一个元素是父组件传递过来的属性名,接收后可以当data
中定义的属性一样直接使用,<div>{{title}}</div>
- 接收的时候验证:
props:{ "title":{type:String}}
,这是另一种接收方式, 此时,props
是一个对象,它里面的每一个属性都是从父组件传过来的属性名,这里的title
就是属性名,这里的type
则是该属性值的类型,强调传递的值应该是String
类型,它会进行验证,若不是String
,会有相应报错。这里还可以设置title
的默认值,写法:props:{"title":{ type:String,default:"嘿嘿" } }
。 可以传数据(绑定属性)和方法
- 直接接收:
-
父组件 B.vue( //*** 后 是我写的注释)
<template>
<div>
<h3 style="color:red;">我是父组件的</h3>
<com-a :title="msg"></com-a> // *** 使用子组件,并传入title
</div>
</template>
<script>
import comA from './A.vue' //***引入子组件A.vue
export default {
components: { //*** 注册子组件
comA
},
data () {
return {
msg: '哈哈哈'
}
}
}
</script>
- 子组件A.vue
<template>
<div>
<h3>我是子组件的</h3>
{{title}} //*** 使用props接收的值
</div>
</template>
<script>
export default {
props: ['title'] //*** 接收父组件传递过来的值
}
</script>
效果如图:,其余可自行验证。
2. 父子组件传值 ,有相应的操作,和方法有关 ( 可看做 ,子组件给父组件传值)
解释例子:A.vue 作为子组件,B.vue作为父组件。他们的所处深度一样,即在同一个文件夹下。
- 父组件中需要进行的操作:
- 在父组件中引入、注册、使用子组件以及传属性值不再细说
- 在使用子组件的时候,用
v-on (@也可)
绑定一个方法名,值也是一个方法: 如:<com-a @changeTitleVal="changeTitleVal"></com-a>
这里@
后的changeTitleVal
是传递给子组件的方法名,引号中的changeTitleVal
,则是在父组件中定义的方法。它俩的名字可相同也可不同。 - 在methods中定义一个方法,名为
changeTitleVal
,如:
changeTitleVal(item){ //*** 这里有没有形参item,取决于子组件是否在使用该方法的时候给父组件传回了值,如果传了值,则这里需定义这个接收的形参item,反之则不需要。
console.log("data:",item)
}
- 子组件中:
- 用
this.$emit
触发自定义事件,执行父组件定义的changeTitleVal
方法,并给父组件传值: 如:this.$emit('changeTitleVal', " 我是传回去的item值 " )
,括号中的前一个参数,是刚刚父组件中定义的方法名,第二个参数是要传的值。
- 用
例,需求
: 需要在子组件A.vue中,点击一个按钮,然后后将A.vue在data中定义的info值传递给父组件B.vue,并将该info的值赋给B中data中定义的msg 。- 父组件 B.vue( //*** 后 是我写的注释)
<template>
<div>
<h3 style="color:red;">我是父组件的</h3>
<com-a :title="msg" @changeTitleVal="changeTitleVal"></com-a>
</div>
</template>
<script>
import comA from './A.vue'
export default {
components: {
comA
},
data () {
return {
msg: '沧海一声笑'
}
},
methods: {
changeTitleVal (data) {
this.msg = data
}
}
}
</script>
- 子组件A.vue
<template>
<div>
<h3>我是子组件的</h3>
<div>{{title}}</div>
<el-button @click="changeText">点击它,info的值传给父组件</el-button>
</div>
</template>
<script>
export default {
props: ['title'],
data () {
return {
info: '滔滔两岸潮'
}
},
methods: {
changeText () {
this.$emit('changeTitleVal', this.info)
}
}
}
</script>
点击按钮之前:
点击按钮之后:3. 父组件主动获取子组件的数据和方法:
父组件主动获取子组件的数据和方法:
- 在调用子组件的时候,给子组件v-son定义一个ref,为son
<v-son ref="son"></v-son>
- 在父组件里面通过:
this.$refs.son.方法
与this.$refs.son.属性
获取; son是ref的值,随取 - 例:父组件 fatherComp.vue:
<template>
<div class="father_bg">
<son ref="son"></son>
<h3><button @click="run">父组件主动获取子组件的数据***********{{msg}}</button></h3>
</div>
</template>
<script>
import son from './sonComp.vue'
export default {
name: 'father1',
components: {
son
},
data () {
return {
msg: ''
}
},
methods: {
run () {
this.msg = this.$refs.son.msg
}
}
}
</script>
- 例:子组件 sonComp.vue:
<template>
<div class="son_bg">
<h3>子组件</h3>
</div>
</template>
<script>
export default {
name: 'son',
data () {
return {
msg: '这是子组件的数据'
}
},
methods: {
}
}
</script>
效果图:
4. 子组件主动获取父组件的数据和方法
在子组件内部直接:this.$parent.数据 、 this.$parent.方法
- 例:父组件 fatherComp.vue:
<template>
<div class="father_bg">
<son ></son>
<h3><button @click="run">run</button></h3>
</div>
</template>
<script>
import son from './sonComp.vue'
export default {
name: 'father1',
components: {
son
},
data () {
return {
msg: '这是父组件的数据'
}
},
methods: {
run () {
alert('这是父组件的run方法')
}
}
}
</script>
- 例:子组件 sonComp.vue:
<template>
<div class="son_bg">
<h3> <button @click="getFdata"> 这是子组件,主动获取父组件的数据和方法*****{{m}}</button> </h3>
</div>
</template>
<script>
export default {
name: 'son',
data () {
return {
m: ''
}
},
methods: {
getFdata () {
this.m = this.$parent.msg
this.$parent.run()
}
}
}
</script>
效果图: