vue组件传参
父传子
代码如下(示例):
父组件 (parent.vue)
<template>
<div>
<child :market="market"></child>
</div>
</template>
<script>
import child from './child';
export default{
component:{
child
},
data(){
return{
market:[{name:"开心一刻",hour24},{name:"开心时刻",hout:12}}]
}
}
}
</script>
子组件(child.vue)
<template>
<div>
<ul v-for="(item,index) in market">
<li>超市名称:{{item.name}},营业时长:{{item.hour}}</li>
</ul>
</div>
</template>
<script>
export default{
props:{
market:{
type:Array, //类型
default:()=>[ ], //默认值
required:true, //必填项,默认false
validator(val){ } //自定义格式的验证,函数return成立
}
}
}
</script>
子传父
代码如下(示例):
父组件 (parent.vue)
<template>
<div>
<child v-on:titleChange="titleChange"></child>
或者<child @titleChange="titleChange"></child>
</div>
</template>
<script>
import child from './child';
export default{
component:{
child
},
data(){
return{
title:'父组件本身的值'
}
},
methods:{
titleChange(e){
this.title = e;
}
}
}
</script>
子组件(child.vue)
<template>
<div>
<button @click="changeTitle">{{title}}</button>
</div>
</template>
<script>
export default{
data(){
return {
title:"子组件本身的值"
}
},
methods:{
changeTitle(){
this.$emit('titleChange','子组件传给父组件的值')
}
}
}
</script>
非父子传参
1、写一个src/components/bus.js 文件,让组件之间有个桥梁
import Vue from 'vue'
export default new Vue()
2、父组件(parent.vue)
import Bus from '@/components/bus'
methods:{
textData(id).then(res => {
Bus.$emit('sendChild', res.data)
})
}
3、子子组件(child.vue)
import Bus from '@/components/bus'
mounted() {
var that = this
Bus.$on('sendChild', function(val) {
console.log(val,'父组件传过来的数据')
})
}
父组件调用子组件的方法
父组件(parent.vue)
<button @click="handleClick">点击调用子组件方法</button>
<child ref='child'></child>
methods:{
handleClick(){
this.$refs.child.sing()
}
}
子组件(child.vue)
<div>我是子组件</div>
methods:{
sing(){
console.log('我是子组件的方法')
}
}
子组件调用父组件的方法
父组件(parent.vue)
<child></child>
methods:{
fatherMethod(){
console.log('我是父组件的方法')
}
}
子组件(child.vue)
<div @click="clildMethod">点击调用父组件的方法</div>
methods:{
childMethod(){
this.$parent.fatherMethod()
}
}
provide / inject的方法(适用于祖先向所有子孙注入值)
父组件(index.vue)第一种
data(){
return{
dataList:['测试1','测试2','测试3']
}
}
provide(){
return{
getData:this.dataList
}
}
子孙组件(textDialog.vue)
inject:['getData'],
created(){
this.getData = ['测试4','测试5','测试6'] //此处修改的值 由于provide/inject绑定并不是响应式的
// 所以此处父组件的值还是初始值 但是如果传入可监听的对象
//那么对象的property还是可以响应的 可查看以下写法
console.log(this.getData)//得到的是dataList数组 此时父组件的值并没有改变
}
父组件(index.vue)第二种(子孙组件修改父组件值)
data(){
return{
dataList:['测试1','测试2','测试3']
}
}
provide(){
return{
getData:this
}
}
子孙组件(textDialog.vue)
inject:['getData'],
created(){
this.getData.dataList = ['测试4','测试5','测试6']
console.log(this.getData.dataList)//得到的是dataList数组 此时父组件的值也会变
}