- A+
所属分类:脚本语言
<template>
<div>
<h1>{{message1}}</h1>//这里是子组件要显示的标题
<button @click="message2">子组件传值给父组件</button>
</div>
</template>
<script>
export default {
name: "Fatherson",
data(){
return{
}
},
props:{
message1:String,//props这里定义属性的类型,props是属性集合。
},
methods: {
message2(){
this.$emit("message3",'我来自子组件')//这里通过$emit()这个通道将‘我来自子组件’传给父组件。
}
}
}
</script>
<style scoped>
</style>
js
父组件
<template>
<div id="app">
<Fatherson :message1="father" @message3="message4"></Fatherson>//:massage1绑定子组件。@message3接受子组件的方法,将其命名为message4。然后调用,将子组件的值传过来。message4后面没有括号。
</div>
</template>
<script>
import Fatherson from "@/components/Fatherson";
export default {
name: 'app',
components: {
Fatherson
},
data(){
return {
text: "abc",
father:'父组件传值给子组件',//将这个值传给子组件。
}
},
methods:{
message4(data){
console.log(data)//这里打印的是子组件传过来的值
}
}
}
</script>
<style>
</style>
js
父组件主动获取子组件的方法
- 调用子组件的时候定义一个ref
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
js
ref=“ruleform”:将ruleform传给ref
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
js
this.$refs[formName]获取数据
父组件主动调用子组件的数据(这是单独有一个父组件和子组件)
先在父组件定义一个ref.
父组件:<Table :tableData="formdata" ref="Table"></Table>
js
ref=“Table”:将Table的数据传给ref
父组件: getChild (){
console.log(this.$refs.Table.x)
},
子组件:data() {
return {
x: '我是子组件的数据,你已经主动获取了我的数据',
csp
this.$refs.Table.x:通过这个将子组件Table里的x数据传给父组件。
总结:在父组件中通过
this.$refs.(ref的定义名)Table.属性
this.$refs.(ref的定义名)Table.方法
js
来获取子组件的数据或者方法
子组件主动调用父组件的数据(这是单独有一个父组件和子组件)
在子组件中通过
this.$parent.属性
this.$parent.方法
js
获取父组件的数据跟方法
子组件中:getparent(){
console.log(this.$parent.parents)
this.$parent.run()
},
js
父组件中:
parents:'我是父组件的数据,儿子,你已经成功获取了我',
run(){
console.log('我是父组件的方法')
}
}
js
这样子组件就能获取父组件的数据跟方法。
- 我的微信
- 这是我的微信扫一扫
- 我的微信公众号
- 我的微信公众号扫一扫