4匕积、Non-Props屬性
概述
當(dāng)父組件向子組件傳的值黔酥，子組件沒有接收的時候菩收，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>
運行結(jié)果
image-20210613142624391.png
阻止這種情況的發(fā)生
<!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>
運行結(jié)果
image-20210613142953416.png
子組件最外層多個div實現(xiàn)接收數(shù)據(jù)
指定一個 div 來接收父組件傳過來的數(shù)據(jù)，否則會報警告挺尿，且此時多個 div 都不接收父組件傳的數(shù)據(jù)
<!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>
運行結(jié)果
image-20210613143411259.png
子組件最外層多個div實現(xiàn)接收到父組件所傳遞他多個屬性和值的其中一個
<!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>
運行結(jié)果
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>
運行結(jié)果
image-20210613144201860.png
