VUE组件之间的传值和调用
一、父组件调用子组件的方法
$refs:父组件 调用 子组件的 方法 或者 属性,由父级来主导调用这里我们可以使用规则的数据结构来存储和转发。通过this.$refs.子组件名.方法(属性名)来操控子组件中的方法或者属性,如下图
父组件:
<template>
<div>
<uuu ref='test_hanshu'></uuu> //ref 给子组件命名一个名字
<p @click="clickme">点击我</p>
</div>
</template>
<script>
import uuu from "../17/17-2copy"
export default {
data() {
return {
visible: false,
};
},
components: {
uuu
},
methods: {
clickme(){
const a="我是超人";
this.$refs.test_hanshu.lucax(a) //调用子组件里面的方法
}
}
};
</script>
访问子组件实例或子元素
this.$refs.test_hanshu.值=123
子组件:
<template>
<div>
我是17-2
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
};
},
methods: {
lucax(uir){
console.log(uir)
}
}
};
</script>
二、子组件调用父组件的方法
第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法
父组件:
<template>
<div>
<child></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件:
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$parent.fatherMethod();
}
}
};
</script>
第二种方法是在子组件里用$emit
向父组件触发一个事件,父组件监听这个事件就行了。
父组件:
<template>
<div>
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件:
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod');
}
}
};
</script>
第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法
父组件:
<template>
<div>
<child :fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件:
<template>
<div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
props: {
fatherMethod: {
type: Function,
default: null
}
},
methods: {
childMethod() {
if (this.fatherMethod) {
this.fatherMethod();
}
}
}
};
</script>
三、父组件向子组件传递数据
1、父组件中动态绑定数据到子组件
父组件向子组件传递数据,首先要在父组件中使用v-bind
命令将要传递的数据绑定到子组件上。比如我们要从父组件中给子组件传递两条数据,示例代码如下:
<template>
<div id="app">
<!-- 使用v-bind命令将父组件中的数据绑定到子组件上 -->
<Child v-bind:val_1="value_1" v-bind:val_2="value_2"></Child>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
components: {
Child
},
data: function () {
return {
value_1: '父组件中的数据1',
value_2: '父组件中的数据2'
}
}
}
</script>
<style>
</style>
2、子组件中接收传递过来的数据
父组件中完成数据绑定之后,在子组件中的props属性接收一下父组件传递过来的数据,要接收多少数据,就在pros属性中写多少数据。比如要接收两条数据,示例代码如下:
<template>
<div class="Child">
<h1>{{ val_1 }}</h1>
<h1>{{ val_2 }}</h1>
</div>
</template>
<script>
export default {
name: 'Child',
// 在props属性里接收父组件传递过来的数据
props: ["val_1", "val_2"]
// 接受父组件的另外一种写法
// props: {
// users: {
// type: Array,
// required: true
// }
// }
}
</script>
<!-- Add “scoped” attribute to limit CSS to this component only -->
<style scoped></style>
四、子组件向父组件传递数据
1.通过父组件给子组件传递函数类型的props实现:子给父传递数据
父组件:
<SchoolCm :getSchoolName="getSchoolName"></SchoolCm>
methods: {
getSchoolName(name) {
console.log('App收到了学校名:', name)
}
}
子组件:
<button @click="sendSchoolName">把学校名给App</button>
props: ['getSchoolName'],
methods: {
sendSchoolName() {
this.getSchoolName(this.name)
}
}
2.通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法,使用@或v-on)
父组件:
<StudentCm name="张三" :age="18" v-on:wxj="getStudentName"></StudentCm>
methods: {
getStudentName() {
console.log('demo被调用了')
}
}
子组件:
<button @click="sendStudentName">把学生名给App</button>
methods: {
sendStudentName() {
// 触发Student组件实例身上的wxj事件
this.$emit('wxj')
}
}
3.通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref) 说明:这种方式虽然麻烦,但是更灵活,可以使用setTimeout控制响应时间。
父组件:
<StudentCm name="李四" ref="student"></StudentCm>
mounted(){
setTimeout(() =>{
// 函数体
this.$refs.student.$on('wxj', this.getStudentName)
}, 3000)
},
methods: {
getStudentName(name) {
console.log('App收到了学生名:', name)
}
}
子组件:
<button @click="sendStudentName">把学生名给App</button>
methods: {
sendStudentName() {
// 触发Student组件实例身上的wxj事件
this.$emit('wxj')
}
}
凯宾斯基笔记:
https://www.cnblogs.com/kaibindirver/p/13369784.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步