vue 父子组件传值
1.父组件向子组件传值 (props)
2.父组件调用子组件的方法 ($refs)
3.子组件向父组件传值 ($emit)
1-----》父组件向子组件传值:
child组件
<template>
<div class="child">
<h1>
{{ message }}
</h1>
</div>
</template>
<script>
export default {
data() {
return {
};
},
props: {
message: {
type: String,
default: "",
},
}
or
props: {
message: {
type: Array,
default: ['foo','bar','baz'] //默认值
}
},
or
props:["message"]
created() {},
methods: {
},
mounted() {},
};
</script>
<style scoped='less'>
</style>
parent组件
<template>
<div class="parent">
<h4>parent</h4>
<childVue :message="msg"></childVue>
</div>
</template>
<script>
import childVue from './child.vue';
export default {
components:{
childVue
},
data() {
return {
msg:'父组件给子组件的数据','
};
},
created() {},
methods:{
},
mounted() {},
};
</script>
<style scoped='less'>
.parent {
margin: auto;
width: 400px;
height: auto;
}
</style>
效果图
2-----》父组件调用子组件的方法
child组件
<template>
<div class="child">
<h1>child</h1>
</div>
</template>
<script>
export default {
data() {
return {
};
},
created() {},
methods: {
childhandle(value) {
console.log(value);
}
},
mounted() {},
};
</script>
<style scoped='less'>
</style>
parent组件
<template>
<div class="parent">
<h4>parent</h4>
<button @click="handle"> 点击</button>
<p>父组件调用子组件的方法: </p>
<childVue ref="mychild"></childVue>
</div>
</template>
<script>
import childVue from './child.vue';
export default {
components:{
childVue
},
data() {
return {
};
},
created() {},
methods:{
handle(){
this.$refs.mychild.childhandle('1111')
},
},
mounted() {},
};
</script>
<style scoped='less'>
.parent {
margin: auto;
width: 400px;
height: auto;
}
</style>
效果图
3----》子组件向父组件传值
child组件
<template>
<div class="child">
<h1>child</h1>
<button v-on:click="handleclick">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
value: "子组件传递给父组件的数据值",
};
},
created() {},
methods: {
handleclick() {
this.$emit("gethandleclick", this.value);
},
},
mounted() {},
};
</script>
<style scoped='less'>
</style>
parent组件
<template>
<div class="parent">
<h4>parent</h4>
<childVue @gethandleclick="gethandleclick"></childVue>
<p>{{value}}</p>
</div>
</template>
<script>
import childVue from './child.vue';
export default {
components:{
childVue
},
data() {
return {
value:''
};
},
created() {},
methods:{
gethandleclick(val){
this.value=val
console.log(this.value);
}
},
mounted() {},
};
</script>
<style scoped='less'>
.parent {
margin: auto;
width: 400px;
height: auto;
}
</style>
效果图