vue.js使用vm.$props属性可以接收上级组件向下级组件传递的数据,利用此属性手机信息搜索网页,实现查找手机品牌功能代码
时间: 2024-08-12 12:08:24 浏览: 42
在Vue.js中,你可以使用`vm.$props`来接收父组件传递的数据。假设你有一个父组件(Parent.vue)传递手机品牌名称(brandName)给子组件(Child.vue),并且在子组件里实现搜索功能。以下是一个简单的例子:
**Parent.vue**
```html
<template>
<div>
<child-component :brand-name="searchTerm"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
searchTerm: 'iPhone' // 示例中的搜索词
};
}
};
</script>
```
**ChildComponent.vue**
```html
<template>
<input type="text" v-model="brandName" placeholder="搜索手机品牌">
<button @click="search">搜索</button>
<ul>
<li v-for="(brand, index) in filteredBrands" :key="index">
{{ brand }}
</li>
</ul>
</template>
<script>
export default {
props: {
brandName: {
type: String,
required: true
}
},
computed: {
filteredBrands() {
// 假设这是一个从API获取数据或预定义数据的方法
const brands = ['Apple', 'Samsung', 'Huawei', 'Xiaomi'];
return brands.filter(brand => brand.toLowerCase().includes(this.brandName.toLowerCase()));
}
},
methods: {
search() {
this.$emit('search-complete', this.brandName); // 触发父组件的自定义事件
}
}
};
</script>
```
在`ChildComponent`中,当你输入品牌名称并点击搜索按钮,会触发`search`方法。这个方法会调用`$emit`发送一个名为`search-complete`的事件,并附带当前的搜索词。父组件可以通过`v-on`监听这个事件,处理搜索结果。
**Parent.vue** (添加事件处理)
```html
<template>
<div>
<child-component :brand-name="searchTerm" @search-complete="handleSearchResult"></child-component>
</div>
</template>
<script>
// ...
methods: {
handleSearchResult(result) {
console.log('搜索结果:', result);
// 这里可以根据result更新搜索结果或执行其他操作
}
}
</script>
```
以上代码演示了如何通过`vm.$props`接收数据并在子组件中进行处理。实际应用中,你可能需要连接到网络API或数据库来获取完整的手机品牌列表。
阅读全文