极客观点
项目管理
HarmonyOS
如代码所示，在filter时获取不到props的值，我要如何对传入子组件的值进行过滤展示？？
//此处vaule可以取到值，this.search及this.searchkeyword 均为undefined
console.log(value, this.search, this.searchkeyword);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<template>
<child :title="title" :searchkeyword="keyword"></child>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let Child = {
props: ['title', 'searchkeyword'],
inheritAttrs: false,
template: `
<p>标题：{{title|noticeWord}}</p>
`,
data() {
return {
search: this.searchkeyword,
href: './introduction.html?id=' + this.id,
}
},
filters: {
noticeWord(value) {
//此处vaule可以取到值，this.search及this.searchkeyword 均为undefined
console.log(value, this.search, this.searchkeyword);
if (!value) return '';
return value.replace(eval('/' + this.search + '/g'), '<span style="color:#70adff;margin:0;">' + this.search + '</span>');
}
},
}
let vm = new Vue({
el: '#app',
data: {
title: '万里晴空乌云',
keyword: '乌云'
},
components: {
'child': Child,
}
})
</script>
</body>
</html>
filter 可以接受多个参数。