可信网站 quot 验证能防范哪些安全.,自己公司网站维护,九九九九人力资源有限公司,当前互联网发展现状Vue中子组件调用父组件数据
Vue是不建议在不同的组件直接传递值的#xff0c;我们需要使用props方法来进行组件间的值传递
子组件调用父组件数据
父模板的数据#xff0c;子组件是无法直接调用的
无法直接调用
1#xff09;组件调用顶级对象中的data div class我们需要使用props方法来进行组件间的值传递
子组件调用父组件数据
父模板的数据子组件是无法直接调用的
无法直接调用
1组件调用顶级对象中的data div classvueper/per/divscriptnew Vue({el: .vue,data: {vals: Hello World !},components: {per: {template: span嵌套组件父 {{vals}}/span,}}}); /script2子组件中调用父组件的数据
无法直接调用 div classvueper/per/divscriptnew Vue({el: .vue,components: {per: {data: function(){return {vals: 我是父组件中的数据}},template: span嵌套组件父 {{vals}} : son/son/span,components: { //嵌套子组件的根为 ason: {template: strong嵌套子组件/strong} }}}}); /script props接受数据
props类似于为子组件定义了属性名用于接受父组件传递进来的值通过v-bind将定义好的属性并绑定到子组件实例上进行参数绑定。
1子组件接受父组件的传值 scriptnew Vue({el: #app,components: {per: {data: () ({val: Hello World !}),template: divh1这是父组件的内容 {{val}}/h1son :getValval/son/div,components: {son: {props: [getVal],template: h1这是子组件的内容 {{getVal}}/h1}} }}})/script 2子组件介绍父组件的多值传递
props对应的数组对象可以接受多值传递 div idappper/per /divscriptnew Vue({el: #app,components: {per: {data: () ({val: Hello World !,nums: 1000}),template: divh1这是父组件的内容 {{val}}/h1son :getValval :getMorenums/son/div,components: {son: {props: [getVal, getMore],template: h1这是子组件的内容 {{getVal}} {{getMore}}/h1}} }}})/script props数据过滤
props后的属性也可以是obj格式的对象方便针对接受的参数进行过滤操作
1字符过滤接受的值是否为字符 div idappper/per /divscriptnew Vue({el: #app,components: {per: {data: () ({val: Hello World !}),template: divh1这是父组件的内容 {{val}}/h1son :getValval/son/div,components: {son: {props: {getVal: [String]},template: h1这是子组件的内容 {{getVal}}/h1}} }}})/script2多数据类型过滤
当前传递进来的数据只允许是数值或者字符 div idappper/per /divscriptnew Vue({el: #app,components: {per: {data: () ({val: Hello World !}),template: divh1这是父组件的内容 {{val}}/h1son :getValval/son/div,components: {son: {props: {getVal: [String, Number]},template: h1这是子组件的内容 {{getVal}}/h1}} }}})/script3多种过滤方式
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}}}
})
