- v-once指令:表示元素只被渲染一次,后来即使数据发生变化,也不会被渲染
<!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>22</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// v-once
const app = Vue.createApp({
data() {
return {count: 1}
},
template: `
<div @click="count += 1" v-once>
{{count}}
</div>
`
});
// app.component('common-item', {
// template: `<div>Hello world</div>`
// });
const vm = app.mount('#root')
</script>
</body>
</html>
- ref: 可通过ref获取dom节点
<!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>22</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// ref:获取dom节点的语法
const app = Vue.createApp({
data() {
return {count: 1}
},
mounted() {
console.log(this.$refs.count);
},
template: `
<div>
<div ref="count">
{{count}}
</div>
</div>
`
});
// app.component('common-item', {
// template: `<div>Hello world</div>`
// });
const vm = app.mount('#root')
</script>
</body>
</html>
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>22</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// v-once 让某个元素标签只渲染一次
const app = Vue.createApp({
data() {
return {count: 1}
},
mounted() {
console.log(this.$refs.common.sayHello());
},
template: `
<div>
<common-item ref="common" />
</div>
`
});
app.component('common-item', {
methods: {
sayHello() {
alert('hello');
}
},
template: `<div>Hello world</div>`
});
const vm = app.mount('#root')
</script>
</body>
</html>
3. provide/inject解决多层组件传值(一次性的,并非双向绑定)
1)如果不使用provide/inject进行多层组件传值,代码如下:
<!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>22</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {count: 1}
},
template: `
<div>
<child :count="count" />
</div>
`
});
app.component('child', {
props: ['count'],
template: `<child-child :count="count"/>`
});
app.component('child-child', {
props: ['count'],
template: `<div>{{count}}</div>`
});
const vm = app.mount('#root')
</script>
</body>
</html>
2)若使用provide/reject ,代码如下:
<!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>22</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {count: 1}
},
provide: { // 用来传固定值(与下面二选一)
count: 1,
},
provide() { // 变成函数,用来传变量
return {
count: this.count
}
},
template: `
<div>
<child :count="count" />
</div>
`
});
app.component('child', {
template: `<child-child/>`
});
app.component('child-child', {
inject: ['count'],
template: `<div>{{count}}</div>`
});
const vm = app.mount('#root')
</script>
</body>
</html>