4、Non-Props属性
概述
当父组件向子组件传的值，子组件没有接收的时候，vue 会把传的值作为子组件最外层 div 的属性；
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="Good Bye!" />
</div>
`
});
// Non-props
app.component('test',{
template: `
<div>Hello World!</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613142624391.png
阻止这种情况的发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="Good Bye!" />
</div>
`
});
// Non-props
app.component('test',{
// 阻止将父组件传递过来的属性和值附加到最外层的 div 上
inheritAttrs: false,
template: `
<div>Hello World!</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613142953416.png
子组件最外层多个div实现接收数据
指定一个 div 来接收父组件传过来的数据，否则会报警告，且此时多个 div 都不接收父组件传的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="Good Bye!" />
</div>
`
});
app.component('test',{
template: `
<div>Hello World!</div>
<div v-bind="$attrs">Hello World!</div>
<div>Hello World!</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613143411259.png
子组件最外层多个div实现接收到父组件所传递他多个属性和值的其中一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="Good Bye!" content="大哥刘备" />
</div>
`
});
// v-bind 也可以使用简写成 :
app.component('test',{
template: `
<div v-bind:message="$attrs.message">Hello World!</div>
<div v-bind:content="$attrs.content">Hello World!</div>
<div v-bind="$attrs">Hello World!</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613143838832.png
获取父组件传过来的属性和值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
<test message="Good Bye!" content="大哥刘备" />
</div>
`
});
app.component('test',{
mounted(){
console.log(this.$attrs);
},
template: `
<div v-bind:message="$attrs.message">Hello World!</div>
<div v-bind:content="$attrs.content">Hello World!</div>
<div v-bind="$attrs">Hello World!</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613144201860.png
