门户网站建设询价公告微信朋友圈广告30元 1000次

一：组件及交互

1、什么是组件？

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

声明组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

使用组件（把组件当作自定义元素）

<div id="components-demo"><button-counter></button-counter>
</div>

引入组件

new Vue({ el: '#components-demo' })

2、父向子传值

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

组件内部声明prop

Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>'
})

父组件里调用，并给prop赋值，传递到组件内部

<blog-post title="My journey with Vue"></blog-post>

3、父组件监听子组件事件

其实就是通过在父组件声明方法，并绑定在子组件上。以子组件内部触发方法的形式，向父组件传参，实现子向父传值的效果。如下

父组件中声明方法，并绑定在子组件上

<template>
<lineChart v-on:getQuotaVal="getQuotaVal"></lineChart>
</template>
<script>methods: {// 本事件用来监听折线图子组件，从子组件拿到指标数据getQuotaVal:function(obj){this.lineDateType = obj.lineDateType; // 这样父组件就拿到了，子组件的obj数据}},
</script>

子组件触发方法

that.val = {};
that.$emit('getQuotaVal',that.val); // 将子组件的数据发送过去；

二：vue中import和require

三：组件抛出内容

在每个vue组件中都有export default来抛出对象，供别的组件使用

这个对象的属性中默认有生命周期钩子如mounted、created，组件自身相关name、components、data、methods

还有watch、filters、props等