初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

初学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 :id="id" :name="'name'" :age="age"></TheMiddle>--> <!-- 不使用v-bind="$props"时这么传值 -->
    <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 :id="id" :name="'name'" :age="age"></TheInner>--> <!-- 不使用v-bind="$props"时这么传值 -->
    <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"来满足当前需求。

具体使用

层级关系如下：文章来源地址https://www.toymoban.com/news/detail-766805.html

<App>
	<TheOuter> 
		<TheMiddle> 
			<TheInner>
			</TheInner>
		</TheMiddle>
	</TheOuter>
</App>

App.vue

<template>
  <div id="app">
    <TheOuter></TheOuter>
  </div>
</template>

TheOuter.vue

<template>
  <div>
    <!-- $emit触发sendMsg事件，sendMsg事件执行sendMsg()方法，输出从底层接收到的值 -->
    <TheMiddle @sendMsg='sendMsg'></TheMiddle>
  </div>
</template>

// --------------------------------------
  methods:{
    sendMsg(msg){
      console.log("收到信息了,这里是TheOuter.vue组件",msg);
    }
  }

TheMiddle.vue

<template>
  <div>
    <!-- 通过v-on=$listeners 将要触发的事件和数据往上层传递-->
    <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>

到了这里，关于初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！