第二十四课 Vue中子组件调用父组件数据

Vue中子组件调用父组件数据

Vue是不建议在不同的组件直接传递值的，我们需要使用props方法来进行组件间的值传递

子组件调用父组件数据

父模板的数据，子组件是无法直接调用的

无法直接调用

1）组件调用顶级对象中的data

    <div class="vue"><per></per></div><script>new Vue({el: '.vue',data: {vals: 'Hello World !'},components: {'per': {template: '<span>嵌套组件父 {{vals}}</span>',}}});      </script>

2）子组件中调用父组件的数据

无法直接调用

    <div class="vue"><per></per></div><script>new Vue({el: '.vue',components: {'per': {data: function(){return {vals: "我是父组件中的数据"}},template: '<span>嵌套组件父 {{vals}} : <son></son></span>',components: { //嵌套子组件的根为 a'son': {template: '<strong>嵌套子组件</strong>'}    }}}});      </script> 

props接受数据

props类似于为子组件定义了属性名，用于接受父组件传递进来的值，通过v-bind将定义好的属性并绑定到子组件实例上进行参数绑定。

1）子组件接受父组件的传值

    <script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !'}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val"></son></div>`,components: {son: {props: ['getVal'],template: '<h1>这是子组件的内容 {{getVal}}</h1>'}} }}})</script>  

2）子组件介绍父组件的多值传递

props对应的数组对象，可以接受多值传递

    <div id="app"><per></per> </div><script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !',nums: 1000}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val" :getMore="nums"></son></div>`,components: {son: {props: ['getVal', 'getMore'],template: '<h1>这是子组件的内容 {{getVal}}  {{getMore}}</h1>'}} }}})</script>    

props数据过滤

props后的属性也可以是obj格式的对象，方便针对接受的参数进行过滤操作

1）字符过滤（接受的值是否为字符）

    <div id="app"><per></per> </div><script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !'}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val"></son></div>`,components: {son: {props: {'getVal': [String]},template: '<h1>这是子组件的内容 {{getVal}}</h1>'}} }}})</script>

2）多数据类型过滤

当前传递进来的数据，只允许是数值或者字符

    <div id="app"><per></per> </div><script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !'}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val"></son></div>`,components: {son: {props: {'getVal': [String, Number]},template: '<h1>这是子组件的内容 {{getVal}}</h1>'}} }}})</script>

3）多种过滤方式

a）为当前空值传递赋默认值
b）类型检测
c）自定义验证函数

官方示例：

Vue.component('example', {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 value > 10}}}
})