威海专业网站建设,网站后台更新 前台看不到,服装公司网站规划建设,做苗木网站哪个公司好子组件接受父组件传递的事件 1.子组件使用事件名$emit(父组件中传递的事件名,想给父组件传递的参数(可选)) click$emit(click) 2.子组件使用 v-on$listeners 父组件#xff1a;
templatediv idappmyCo… 子组件接受父组件传递的事件 1.子组件使用事件名$emit(父组件中传递的事件名,想给父组件传递的参数(可选)) click$emit(click) 2.子组件使用 v-on$listeners 父组件
templatediv idappmyComponents :msgform.msg clicka//div
/templatescript
import myComponents from ./components/myComponents;export default {name: App,components: {myComponents},data(){return {form:{msg: 10}}},methods:{a(){console.log(哈哈哈)},}
}
/scriptstyle/style子组件
templatediv!-- 子组件接收父组件传来的参数--!-- v-on$listeners 和 click$emit(click) 效果一样 两者选一即可--h1 v-on$listeners click$emit(click){{ msg }}/h1/div
/templatescript
export default {name: my-Components,props: {msg: {type: String,default: 18}},created() {console.log(this.$listeners) //一个对象里面包含父组件传递过来的所有事件},methods: {}
}
/script
style scoped
/style父组件传值给子组件 1.子组件使用props声明想要的属性再将该属性动态绑定给子组件 props: {msg: {type: String,default: 18},
},然后子组件中绑定数据即可 父组件使用prop声明就可以传递给子组件 :propmsg Head1 :nameform.name/ 2.子组件使用$attrs这个组件包含了被传入但没有声明的prop 子组件
templatediv!-- 子组件接收父组件传来的参数--h1{{ msg }}/h1/div
/templatescript
export default {name: my-Components,
//不声明msg// props: {// msg: {// type: String,// default: 18// },// },created() {console.log(this.$attrs) //一个对象包含父组件中被传入但没有声明的prop},methods: {}
}
/scriptstyle scoped
/style打印结果 此时h1标签上就有msg属性
templatediv!-- 子组件接收父组件传来的参数--h1 v-bind$attrs {{this.$attrs.msg}}/h1/div
/template页面显示结果 需要注意的一点是Vue会将被传入但未声明的prop作为html属性绑定到组件的根元素上 可以设置属性 inheritattrs为false将这些默认行为去掉来解决这个问题。
templatediv!-- 子组件接收父组件传来的参数--h1 v-bind$attrs {{this.$attrs.msg}}/h1/div
/templatescript
export default {name: my-Components,inheritAttrs:false,
}
/scriptstyle scoped
/style对外暴露子组件插槽 1.直接向子组件转发插槽使用父组件的 $slots 该组件包含了传递给父组件的非作用域插槽 使用$scopeSlots可传递给父组件的作用域插槽这个组件包含了组件接受的所有插槽 子组件
template
el-input
v-modelinnerVal
v-bind-$attrs
input$emit(input, $event)v-on-$listeners//子组件中写两个插槽
template #append
slot nameappend/slot/template
template #prepend
slot nameprepend/slot/template
/el-input
/template 打印this.$slots props validator 一般我们会用对象的形式声明prop,可以在对象中指定prop的默认值也可以指定类型对prop进行验证。 一个更灵活的的方式是传入并编写一个验证函数prop会作为参数传入该函数函数返回fals时会抛出控制台警告这种方式特别适合验证枚举值 子组件
templatediv!-- 子组件接收父组件传来的参数--h1 v-on$listeners click$emit(click) v-bind$attrs {{this.$attrs.msg}}/h1/div
/templatescript
export default {name: my-Components,inheritAttrs:false,props:{numberIs:{default: 1,//当传入的prop值不是1,2,3时控制台会抛出警告validator: prop [1, 2, 3].includes(prop)}},
}
/script
style scoped
/style父组件
templatediv idapp!-- 传入numberIs的值为4 --myComponents :msgform.msg clicka numberIs4//div
/templatescript
import myComponents from ./components/myComponents;export default {name: App,components: {myComponents},data() {return {form: {msg: 10},}},methods: {a() {console.log(哈哈哈)},}
}
/scriptstyle/style$refs用于父组件获取整个子组件实例然后可以使用子组件的方法和属性暴露子组件方法 父组件
templatediv idapp!-- ref相当于给当前子组件设置了一个id可以使用refs根据ref的值获取该组件 --myComponents :msgform.msg clicka numberIs1 refbb//div
/templatescript
import myComponents from ./components/myComponents;export default {name: App,components: {myComponents},data() {return {form: {msg: 10},}},methods: {a() {//获取ref值为bb的子组件并调用该子组件上的show方法this.$refs.bb.show()},}
}
/scriptstyle/style子组件
templatediv!-- 子组件接收父组件传来的参数--h1 v-on$listeners v-bind$attrs {{this.$attrs.msg}}/h1/div
/templatescript
export default {name: my-Components,inheritAttrs:false,props:{numberIs:{default: 1,//当传入的prop值不是1,2,3时控制台会抛出警告validator: prop [1, 2, 3].includes(prop)}},created() {},methods: {show(){console.log(1111)}}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
/style打印 this.$refs 显示为 点击之后控制台输出 但在封装子组件后如果不对子组件的方法进行暴露调用时我们往往需要通过ref先获取父组件实例再获取子组件实例这种方式导致组件代码难以维护
//获取父组件bb之后再获取子组件aa最后使用aa中的show方法
this.$refs.bb.$refs.aa.show()
我们可以再父组件中提供与子组件同名的方法 对外暴露让使用者只通过父组件就可以进行调用
子组件中
methods:{show() {this.$refs.aa.show()}
}
父组件中
methos: {show() {this.$refs.bb.show()}
}总结 1. $attrs 简化多层组件之间props传值 2. $listeners 简化多层组件之间事件传递 3. $Slots 更多拓展自定义组件传值包括自定义html元素及对象 4. props validator 增强组件传值稳健性可自定义业务代码效验参数 5. $refs 对外提供API 增强组件灵活度和可控性
