9盐碱、基礎(chǔ)語法知識點補充
使用ref獲取dom節(jié)點
<!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({
mounted(){
// 打印 DOM
console.log(this.$refs.hello);
// 操作 DOM
this.$refs.hello.innerHTML = "<button>哈哈哈</button>"
},
template: `
<div>
<div ref="hello">
hello world!
</div>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613191137677.png
使用ref獲取子組件的引用
<!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({
mounted(){
// 打印 子組件
console.log(this.$refs.hello);
// 調(diào)用子組件的方法
this.$refs.hello.print();
},
template: `
<div>
<common-item ref="hello" />
</div>
`
});
app.component('common-item', {
methods:{
print(){
console.log("子組件的打印方法妓布！");
}
},
template: `
<div>hello world!</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613191645529.png
provide和inject
用于數(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({
provide: {
message: "Hello World!"
},
template: `
<div>
<common-item />
</div>
`
});
app.component('common-item', {
template: `
<child />
`
});
app.component('child', {
template: `
<child-child />
`
});
app.component('child-child', {
inject: ['message'],
template: `
<div>{{message}}</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613192612379.png
provide里面的數(shù)據(jù)是data里面的數(shù)據(jù)
provide提供數(shù)據(jù)是一次性的钝的，不是雙向綁定的（不是動態(tài)變化的）
<!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!'
}
},
provide(){
return{
message: this.message
}
},
template: `
<div>
<common-item />
</div>
`
});
app.component('common-item', {
template: `
<child />
`
});
app.component('child', {
template: `
<child-child />
`
});
app.component('child-child', {
inject: ['message'],
template: `
<div>{{message}}</div>
`
});
const vm = app.mount('#root');
</script>
</html>
運行結(jié)果
image-20210613192844634.png
