- 【Vue3 从入门到实战 进阶式掌握完整知识体系】012-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】011-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】010-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】015-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】017-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】014-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】013-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】018-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】016-探索组
- 【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue
3、单向数据流的理解
传多个参数的情况
<!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({
data(){
return{
message: 'Hello World!',
message1: 'Hello World111!',
message2: 'Hello World222!',
message3: 'Hello World333!',
}
},
template: `
<div>
<test :message="message" :message1="message1" :message2="message2" :message3="message3" />
</div>
`
});
app.component('test',{
props: ['message', 'message1', 'message2', 'message3'],
template: `
<div>
{{ message }} -- {{ message1 }} -- {{ message2 }} -- {{ message3 }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613125233430.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({
data(){
return{
parameter: {
message: 'Hello World!',
message1: 'Hello World111!',
message2: 'Hello World222!',
message3: 'Hello World333!',
}
}
},
template: `
<div>
<test v-bind="parameter" />
</div>
`
});
app.component('test',{
props: ['message', 'message1', 'message2', 'message3'],
template: `
<div>
{{ message }} -- {{ message1 }} -- {{ message2 }} -- {{ message3 }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613125622108.png
关于属性名
属性名如果是多个单词，建议使用 - 分割，html属性名不支持大写，会自动转换成小写！
<!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({
data(){
return{
message: 'Hello World!'
}
},
// 这里使用 - 写
template: `
<div>
<test :my-message="message" />
</div>
`
});
// 然而这里必须使用驼峰式命名接收，否则接收不到！
app.component('test',{
props: ['myMessage'],
template: `
<div>
{{ myMessage }}
</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613130158946.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({
data(){
return{
count: 1
}
},
template: `
<div>
<test :count="count" />
</div>
`
});
app.component('test',{
props: ['count'],
template: `
<div @click="count ++">{{ count }}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613130550889.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({
data(){
return{
count: 1
}
},
template: `
<div>
<test :count="count" />
</div>
`
});
app.component('test',{
props: ['count'],
data(){
return{
myCount: this.count
}
},
template: `
<div @click="myCount ++">{{ myCount }}</div>
`
})
const vm = app.mount('#root');
</script>
</html>
运行结果
image-20210613131028364.png
为什么自组件不能改父组件的数据
因为如果子组件能更改父组件的数据，其他使用该数据的组件里面使用的数据也会随之更改，那么每个组件之间就相互影响了！
网友评论