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）非父子组件通信

见官网