FE - 走向Node与Webpack 之路 - Vue 数据过滤与组件通讯

1. vue 数据过滤

数据过滤，可以通过全局 Vue.filter 定义规则，也可以局部实现过滤。

局部过滤：

export default {
name: 'app',
components: {

},
data () {
return {
numbers: [1, 2, 3, 4, 5],
}
},
methods:{//过滤可以被2整除的
even: function (nums) {
return nums.filter(function (num) {
return num%2===0;
})
}
},
computed:{//过滤可以被2整除的
evenNums:function () {
return this.numbers.filter(function (number) {
return number%2===0;
})
},
}
}

html

实现如下 :

<h3>for - methods 过滤 </h3>
<ul>
过滤的当参数传入
<li v-for="n in even(numbers)" >{{n}}</li>
</ul>

<h3>for - computed 过滤 </h3>
<ul>
直接返回过滤后的结果
<li v-for="n in evenNums">{{n}}</li>
</ul>

全局过滤器：

// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

2.组件间通信

vue实现都是通过各个组件直接的组合，形成界面；

（1）父子组件通讯

父 -> 子 : props

父组件向子组件传值的时候，子组件需要定义props字段，比如：

props 定义的字段就与data中的字段一样，可以通用了。

Child.vue

<template>
<div>
<p>{{item.name}} | {{item.age}}</p>
</div>
</template>

<script>
export default {
name: "Child",
props: ["item"],
}
</script>

<style>

</style>

parent.vue

父组件在使用子组件的时候，加载，注册，使用；

前面在

child.vue

中注册了

props

字段

item

, 在使用子组件的时候，可以直接添加

item=""

属性即可，将参数传入父组件。

<template>
<div>
<h1>演示子控件与父控件交互</h1>

<h3>to Child : child data show</h3>
<demo-child
v-for="item in items"
v-bind:item="item" //添加item属性传入item参数
></demo-child>
</div>
</template>

<script>
//导入自组件
import Child from "./child.vue"

export default {
name: "parent",
data(){
return {
items: [
{name: "labelnet", age: 24},
{name: "yuan", age: 18},
{name: "Xming", age: 28},
],
item: {},
}
},
components: { //注册子组件
"demo-child": Child
},

}
</script>

<style>

</style>

子 -> 父 ： 自定义事件

子组件向父组件传递信息，需要自定义事件，事件的触发使用

$emit

;

child.vue

我们把当前

item

的

age +100

返回；在

method

中定义方法，

$emit('当前方法名'，参数....)

, 比如定义

toparent

方法，

button

点击的时候，触发这个方法。如果想要父组件获取到emit传出的

item

参数，在父组件中也要定义一个方法，见下文。

<template>
<div>
<p>{{item.name}} | {{item.age}}</p>
<button @click="toparent" >toparent</button>
</div>
</template>

<script>
export default {
name: "Child",
props: ["item"],
methods: {
toparent: function () {
this.item.age += 100;
this.$emit("toparent",this.item);
}
},
}
</script>

<style>

</style>

parent.vue

在使用子组件的时候，可以直接添加我们再子组件中自定义的

toparent

事件，就是当点击的时候，相应父组件中的那个方法 ，比如我们的

fromChild

方法，见

methods

.

fromChild

可以讲上面的传入的

item

获取出来。

<template>
<div>
<h1>演示子控件与父控件交互</h1>
<h3>to Child : child data show</h3>
<demo-child
v-for="item in items"
v-bind:item="item"
@toparent="fromChild"
></demo-child>
<h3>from Child : parent data show</h3>
<p>{{item}}</p>
</div>
</template>

<script>
import Child from "./child.vue"

export default {
name: "parent",
data(){
return {
items: [
{name: "labelnet", age: 24},
{name: "yuan", age: 18},
{name: "Xming", age: 28},
],
item: {},
}
},
components: {
"demo-child": Child
},
methods: {
fromChild: function (item) {
this.item=item;
}
}

}
</script>

<style>

</style>

（2）非父子组件通信

见官网