vue.js----父组件向子组件传值的方式

62 阅读 0 评论 41 点赞

我是靠谱客的博主清新芹菜，最近开发中收集的这篇文章主要介绍vue.js----父组件向子组件传值的方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1，父组件向子组件传递的方式一：props

父组件代码：

<template>
<div class="about">
<h1>This is an about page</h1>
<child v-bind:title="name"></child>
<child title="name"></child>
</div>
</template>
<script>
import child from '../components/child.vue'
// 全局注册组件
export default {
data(){
return{
name:'李自成'
}
},
components:{
'child':child
}
}
</script>

子组件代码：

<template>
<div class="title">
{{title}}
</div>
</template>
<script>
export default {
data() {
return {};
},
props:['title']
};
</script>

父组件向子组件传值的过程：首先在父组件中引入子组件 import child from '../components/child.vue' ；其次在父组件中注册子组件 components:{ 'child':child } ；然后在父组件的根模板中使用子组件<child></child>；然后还需要绑定要传递的数据，如上面的父组件中的代码一样，使用 v-bind:title="name" 是将动态变量name传递到子组件，使用 title="name" 是将静态字符串 name 传递到子组件；

在子组件中使用 props 进行接收父组件传递过来的数据，props:['title'] ; 然后在子组件的根模板中就可以使用了，可以绑定到标签中，也可以使用使用 {{title}}

注：父组件向子组件传值，可以传递一个静态值，动态值，数组，对象等

如果想对pros指定验证要求，则子组件中的pros不再是一个数组，而是一个对象；


title:{
type:[String],// 验证数据类型；可选值：String , Number , Boolean , Array , Object ,
// Date , Function , Symbol
required:true, // 是否必须；
default:'abc',
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}

2，通过ref ，在父组件中改变子组件中的数值或执行方法：

父组件代码：

<template>
<div class="about">
我是父组件：
<child2 ref="child"></child2>
<input type="text" v-model="to_child">
<button @click="toChild">点我向子组件发送数据</button>
</div>
</template>
<script>
import child2 from '../components/child2.vue'
// 全局注册组件
export default {
data(){
return{
to_child:'' }
},
components:{
'child2':child2
},
methods:{
toChild(){
this.$refs.child.name = this.to_child
// 改变子组件中的变量值
this.$refs.child.func2() // 执行子组件中的方法
}
}
}
</script>

子组件代码；

<template>
<div class="all2">
<input type="text" v-model="name" />
<button @click="send">点我改变父组件中的值</button>
</div>
</template>
<script>
export default {
data() {
return {name:'哈哈哈'};
},
methods:{
func2(){alert("嘻嘻嘻")},
send(){
this.$parent.change =
this.name
this.$parent.func()
}
}
};
</script>

3，通过 $children 改变子组件属性或执行方法：

父组件：

<template>
<div class="about">
我是父组件：
<child2 ref="child"></child2>
<input type="text" v-model="to_child">
<button @click="toChild3">点我向子组件执行数据</button>
</div>
</template>
<script>
import child2 from '../components/child2.vue'
// 全局注册组件
export default {
data(){
return{
change:'',from_txt:'',to_child:''
}
},
components:{
'child2':child2
},
methods:{
toChild3(){
this.$children[0].name = "jljljljljl"
this.$children[0].func2()
}
}
}
</script>

子组件代码：

<template>
<div class="all2">
<input type="text" v-model="name" />
<button @click="send">点我改变父组件中的值</button>
</div>
</template>
<script>
export default {
data() {
return {name:'哈哈哈'};
},
methods:{
func2(){alert("嘻嘻嘻")}
}
};
</script>