vue之父子组件传值、以及验证父子组件传值的合法性
vue之父子组件传值
一、父组件给子组件传值
1. 父组件给子组件传值
注意：传值时，传递的参数最好不要和子组件里已有的参数名冲突。
并且也可以传方法，传方法时不要加扩号，扩号意味着执行。
而且还可以把父组件整个实例传递过去
1.1 传递属性
a.父组件调用子组件的时候，绑定动态属性；
<v-header :title="title"></v-header>
b.在子组件的export default 里面通过props接收父组件穿过来的数据
<script> export default { name:"header", data(){ return { } }, props:["title"] } </script>
结果：
1.2 传递方法
a.父组件调用子组件的时候，绑定动态方法；
//home.vue <template> <div> <v-header :title="title" :homeFun="homeFun"></v-header> 首页组件 </div> </template> <script> import Header from './Header' export default { name:"home", data(){ return { msg:"我是一个home组件", title:"首页" } }, methods:{ homeFun(){ console.log(this.msg) } }, components:{ 'v-header':Header } } </script>
//Header.vue <template> <div> <h2>我是头部组件</h2> <h4>{{title}}</h4> <button @click="homeFun()">执行父组件的fun方法</button> </div> </template> <script> export default { name:"header", data(){ return { msg:"6666" } }, props:["title","homeFun"] } </script>
结果：
1.3 传递父组件整个实例
a.父组件调用子组件的时候，绑定this；
#home.vue <template> <div> <v-header :title="title" :homeFun="homeFun" :home="this"></v-header> 首页组件 </div> </template> #Header.vue <template> <div> <h2>我是头部组件</h2> <h4>{{title}}</h4> <button @click="homeFun()">执行父组件的fun方法</button> <button @click="getParent()">父组件实例</button> </div> </template> <script> export default { name:"header", data(){ return { msg:"6666" } }, methods:{ getParent(){ console.log(this.title); console.log(this.msg) } }, props:["title","homeFun","home"], } </script>
结果：
注意：
当使用this时，只有当子组件中没有所用变量是才会去使用父组件的变量，比如msg在子组件已经存在，所以在使用的使用直接使用的是子组件的msg，也就是6666.如果想要使用父组件的msg可以这样：
console.log(this.home.msg)
如：
2. 子组件验证父组件传过来的值的合法性
子组件在接收父组件的传值时 props的值 就不单单只是一个列表里加名称了。而是一个字典套对象
用法如下：
props: {
// 基础的类型检查 (`null` 匹配任何类型)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。具体可看官网说明。
二、父组件主动获取子组件的数据和方法
1.步骤
a.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
b.在父组件里通过以下方式来使用
this.$refs.header.属性
this.$refs.header.方法
2.演示1：获取子组件属性msg
#home.vue <template> <div> <v-header ref="header"></v-header> 首页组件 <button @click="getChildData()">主动获取子组件的属性和方法</button> </div> </template> <script> import Header from './Header' export default { name:"home", data(){ return { msg:"我是一个home组件", title:"首页" } }, methods:{ getChildData(){ console.log(this.$refs.header.msg) } }, components:{ 'v-header':Header } } </script> #header.vue <template> <div> <h2>我是头部组件</h2> </div> </template> <script> export default { name:"header", data(){ return { msg:"6666" } }, } </script>
结果：
演示2：获取子组件的方法
#home.vue <template> <div> <v-header ref="header"></v-header> 首页组件 <button @click="getChildData()">主动获取子组件的属性和方法</button> </div> </template> <script> import Header from './Header' export default { name:"home", data(){ return { msg:"我是一个home组件", title:"首页" } }, methods:{ getChildData(){ console.log(this.$refs.header.msg); this.$refs.header.run() } }, components:{ 'v-header':Header } } </script> #header.vue <template> <div> <h2>我是头部组件</h2> </div> </template> <script> export default { name:"header", data(){ return { msg:"6666" } }, methods:{ run(){ console.log("我是子组件的方法") } } } </script>
结果：
三、子组件主动获取父组件的属性和方法
1.步骤
直接在子组件中使用下面命令：
this.$parent.属性
this.$parent.方法
2.演示
#home.vue <template> <div> <v-header ref="header"></v-header> <hr /> 首页组件 <br /> <button @click="getChildData()">主动获取子组件的属性和方法</button> </div> </template> <script> import Header from './Header' export default { name:"home", data(){ return { msg:"我是一个home组件", title:"首页" } }, methods:{ getChildData(){ console.log(this.$refs.header.msg); this.$refs.header.run() }, run(){ console.log("我是home组件的方法") } }, components:{ 'v-header':Header } } </script> #header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParentData()">主动获取父组件的属性和方法</button> </div> </template> <script> export default { name:"header", data(){ return { msg:"6666" } }, methods:{ run(){ console.log("我是子组件的方法") }, getParentData(){ console.log(this.$parent.msg); this.$parent.run() }, } } </script>
结果：
