<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../vue.global.js"></script>
</head>
<body>
<style>
.add{
background-color: red;
}
</style>
<div id="app">
<my-head title='你好' class='add'></my-head>
</div>
<script>
let app = Vue.createApp({
data() {
return { title:'' };
},
});
app.component("MyHead", {
//子组件 不使用props接收父组件传输的值
// props: {
// title: {
// type: String,
// },
// myclass:{
// type:String
// }
// },
template: `
<header>
<h1 v-bind:title='$attrs.title'>logo</h1>
<h2 v-bind:myclass='$attrs.myclass'>logo</h2>
<ul>
<li>首页</li>
<li>音乐</li>
<li>视频</li>
</ul>
</header>
`,
//inheritAttrs：false
methods: {
created(){
console.log(this.$attrs);
console.log(this.$attrs.title);
this.title=this.$attrs.title
}
},
});
let vm = app.mount("#app");
</script>
</body>
</html>
子组件不接受父组件传输的值，那么属性会直接作用于子组件的最外层容器的节点上 可以使用inheritAttrs：false阻止 否则像下图所致
使用了props那么就会当作正常属性使用(正常接收就不必使用inheritAttrs：false)
自定义接收父组件传输的值作用子组件某个节点上
(不可使用props接收才能实现)
//所有属性添加到h2的节点
<h2 v-bind='$attrs'>logo </h2>
//针对不同的属性添加到不同的节点
<h1 v-bind:title='$attrs.title'>logo </h1>
<h2 v-bind:myclass='$attrs.myclass'>logo </h2>
我即想作用于子组件的某个节点也想使用传过来的值但是作用于子组件的某个节点的时候不可以props接收参数怎么办
//子组件的生命周期使用
created() {
console.log(this.$attrs);
console.log(this.$attrs.title);
this.title=this.$attrs.title
},
