首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下,父子组件之间怎么传值。
先说一下父组件引入子组件的方法。
1.组件传值-父组件向子组件传值
第一步:父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用
父组件:father-tag.vue
<template>
<div class="parent">
<h3>父组件</h3>
<!--使用子组件-->
<son-tag :fData="data1" :fMessage="data2"></son-tag>
</div>
</template>
<script>
//引入子组件
import sonTag from "./son-tag.vue"
export default {
name:'parentTag',
components:{
sonTag
},
data(){
return{
data1:"父组件数据data1",
data2:"父组件数据data2"
}
}
}
</script>
<style>
</style>
第二步:把父组件传递过来的数据, 在 子组件的props数组 中定义一下
-
组件中的 所有props 中的数据,都是通过父组件传递给子组件的
-
props 中的数据都是只读的,无法重新赋值
第三步:在该子组件中使用props数组 中定义好的数据
子组件:son-tag.vue
<template>
<div class="son">
<h3>子组件</h3>
<p>下面是父组件传递过来的数据:</p>
<p>第一个数据:{{fData}}</p>
<p>第二个数据:{{fMessage}}</p>
</div>
</template>
<script>
export default {
name:"sonTag",
props:["fData","fMessage"],
data(){
return{}
}
}
</script>
<style>
</style>
方法2:通过provide和inject实现从父组件向子组件传值
父组件:
<template>
<div class="parent">
<h3>父组件</h3>
<!--使用子组件-->
<son-tag></son-tag>
</div>
</template>
<script>
//引入子组件
import sonTag from "./son-tag.vue"
export default {
name:'parentTag',
components:{
sonTag
},
data(){
return{
data1:"父元素数据1",
data2:"父元素数据2"
}
},
provide(){
return{
"instance":this
}
}
}
</script>
<style>
</style>
子组件:
<template>
<div class="son">
<h3>子组件</h3>
<p>父元素传过来的数据1:{{instance.data1}}</p>
<p>父元素传过来的数据2:{{instance.data2}}</p>
</div>
</template>
<script>
export default {
name:"sonTag",
data(){
return{
}
},
inject:["instance"]
}
</script>
<style>
</style>
方法3:通过$refs实现从父组件向子组件传值
父组件
<template>
<div class="parent">
<h3>父组件</h3>
<!--使用子组件-->
<son-tag ref="son"></son-tag>
<button @click="parentClick">给子元素传值</button>
</div>
</template>
<script>
//引入子组件
import sonTag from "./son-tag.vue"
export default {
name:'parentTag',
components:{
sonTag
},
data(){
return{
}
},
methods:{
parentClick(){
this.$refs.son.msg="Hello world";
}
}
}
</script>
<style>
</style>
子组件:
<template>
<div class="son">
<h3>子组件</h3>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name:"sonTag",
data(){
return{
msg:""
}
},
}
</script>
<style>
</style>
2.组件传值-父组件把方法传递给子组件
第一步:父组件向子组件传递方法,使用事件绑定机制 v-on,自定义一个事件属性,传递给子组件
父组件:father-tag.vue
<template>
<div class="parent">
<h3>父组件</h3>
<!--使用子组件-->
<son-tag @show="showFather"></son-tag>
<p>子组件传来数据1:{{data1}}</p>
<p>子组件传来数据2:{{data2}}</p>
</div>
</template>
<script>
//引入子组件
import sonTag from "./son-tag.vue"
export default {
name:'parentTag',
components:{
sonTag
},
data(){
return{
data1:"",
data2:""
}
},
methods:{
showFather(a,b){//触发子组件方法 把子组件的值传过来
console.log("触发了父组件的方法====="+a+"======"+b);
this.data1=a;
this.data2=b;
}
}
}
</script>
<style>
</style>
第二步:在子组件中定义一个方法,在方法中,利用 $emit 触发 父组件传递过来的,挂载在当前实例上的事件,还可以传递参数
第三步:在子组件中调用定义的那个方法,就可以触发父组件传递过来的方法了 并通过方法向父元素传值
子组件:son-tag.vue
<template>
<div class="son">
<h3>子组件</h3>
<button @click="sonClick">触发父组件方法</button>
</div>
</template>
<script>
export default {
name:"sonTag",
data(){
return{
msg:"hhh",
data:"111"
}
},
methods:{
sonClick(){
console.log("sonclick");
this.$emit("show",this.msg,this.data);
}
}
}
</script>
<style>
</style>