初学vue
简介
1、v-bind="$props"
: 可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。
2、v-bind="$attrs"
: 将调用组件时的组件标签上绑定的非props的属性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
3、v-on="$listeners"
:通过this.emit(‘事件名’,数据),将底层级的信息往高层级传递。
1、v-bind=“$props”
有如下层级关系:
父组件TheOuter想向子组件TheInner传值
<App><TheOuter> <TheMiddle> <TheInner></TheInner></TheMiddle></TheOuter></App>
- App.vue
<template><div id="app"><TheOuter :id="1" :name="'jack'" :age="21"></TheOuter></div></template><script>import TheOuter from "./components/TheOuter.vue";export default {name: "App",components: {TheOuter,},};</script>
- TheOuter.vue
<template><div><!----> <TheMiddle v-bind="$props" gender="man"></TheMiddle></div></template><script>import TheMiddle from "./TheMiddle.vue";export default {name: "TheOuter",components: { TheMiddle },props:['id','name','age'], // 接收prop值data() {return {};},mounted() {console.log(this.id, this.name, this.age,"这是TheOuter组件");},};</script>
- TheMiddle.vue
<template><div><!----> <TheInner v-bind="$props"></TheInner></div></template><script>import TheInner from "./TheInner.vue";export default {name: "TheMiddle",components: { TheInner },props:['id','name','age'], // 接收prop值data() {return {};},mounted(){console.log(this.id, this.name, this.age,"这是TheMiddle组件");}};</script>
- TheInner.vue
<template><div><div>hello啊</div></div></template><script>export default {name: "TheInner",props: ["id", "name", "age"], // 接收prop值data() {return {};},mounted() {// console.log(this.$props["name"]);console.log(this.id, this.name, this.age, "这是TheInner组件");},};</script>
2、v-bind=“$attrs”
例如,有如下层级关系:
父组件TheOuter想向子组件TheInner传值
<App><TheOuter> <TheMiddle> <TheInner></TheInner></TheMiddle></TheOuter></App>
- App.vue
<template><div id="app"><TheOuter id="1" name="jack" age="21"></TheOuter></div></template>
- TheOuter.vue
<template><div><TheMiddle v-bind="$attrs" gender="man"></TheMiddle></div></template>// ----------------------------------mounted(){// console.log(this.$attrs['id']); // 1// console.log(this.$attrs['name']); // jack// console.log(this.$attrs['age']); // 21}
- TheMiddle.vue
<template><div><TheInner v-bind="$attrs"></TheInner></div></template>// ----------------------------------mounted(){// prop中变量的使用// console.log(this.$attrs['id']); // 1// console.log(this.$attrs['name']); // jack// console.log(this.$attrs['age']); // 21// console.log(this.$attrs['gender']); // man}
- TheInner.vue
<template><div><div>hello啊</div></div></template>// ----------------------------------mounted(){// prop中变量的使用// console.log(this.$attrs['id']); // 1// console.log(this.$attrs['name']); // jack// console.log(this.$attrs['age']); // 21// console.log(this.$attrs['gender']); // man}
v-bind="$attrs"
的作用是将调用组件时的组件标签上绑定的非props的属性(class和style除外)向下传递。
你可以发现,使用了v-bind='$attrs'
的组件,都可以使用从上级组件中获取值,并且它的下级组件直接下级组件即便没有用v-bind='$attrs'
绑定,同样也可以获取到值。需要注意的是,可以用props来接收传递过来的值,但不要同时用props配置项和
this.\$props['xxx']
调用同一个值,因为props优先级比this.$props['xxx']
高,会导致this.$props['xxx']
的结果为undefined。
3、v-on=“$listeners”
和上面的this.$ attrs['xxx']
相反,v-on="$listeners"
作用是用于底层级组件向高层级组件传递信息。通过this.$emit()
触发事件,来进行信息传递,
例如有父组件TheOuter,子组件TheMiddle,孙组件TheInner 三个组件,如果TheInner传递信息给TheMiddle则可直接使用$emit
,如果是TheInner向TheOuter传递信息,则就需要TheInner先$emit
给TheMiddle,TheMiddle再$emit
给TheOuter,这种方式比较繁琐,则此时可以使用v-on=”$listeners”来满足当前需求。
具体使用
层级关系如下:
- App.vue
<template><div id="app"><TheOuter></TheOuter></div></template>
- TheOuter.vue
<template><div><TheMiddle @sendMsg='sendMsg'></TheMiddle></div></template>// --------------------------------------methods:{sendMsg(msg){console.log("收到信息了,这里是TheOuter.vue组件",msg);}}
- TheMiddle.vue
<template><div><TheInner v-on="$listeners"></TheInner></div></template>// 同样这里也可以调用mounted(){this.$listeners.sendMsg()}
- TheInner.vue
<template><div><button @click="handleClick">hello啊</button></div></template>// -----------------------------------methods:{// 点击事件触发的函数handleClick(){// 调用this.$emit,往上层传递要触发的事件名和数据this.$emit("sendMsg",'hello啊')// 或者// this.$listeners.sendMsg('hello啊')}}// ------------------------------------// 或者更简单点写,直接不写方法了<template><div><button @click="$emit('sendMsg','hello啊')">hello啊</button></div></template>