vue组件化开发

});

new Vue({

el: ‘#main3’

});

局部组件

局部组件：只是在我们规定的范围之内才会生效。

new Vue({

el: ‘#main’,

components: {

“my-header”: {

template: ‘

标题{{vue}}

’

}

}

})

注意：

当使用 kebab-case(中划线命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说

<my-component-name>和<MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM(即非字符串的模板) 中使用时只有kebab-case 是有效的

//中划线 使用语法： `

Vue.component(‘my-component-name’, { /* … */ })

//驼峰 使用语法： 和 `都可以

Vue.component(‘MyComponentName’, { /* … */ })

脚手架vue-cli中的组件

我们一般通过脚手架vue-cli开发项目，每个 .vue单文件就是一个组件。在父组件中使用import 导入一个子组件，并在components中注册子组件，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法触发自定义事件传递参数。

父传子（props）

prop 的定义应该尽量详细，至少需要指定其类型

{{ parentMessage }}

通过 $on 传递父组件方法

通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系

<my-child @childEvent=“parentMethod”>

子组件

$parent获取父组件然后使用父组件中的数据（不推荐）

准确来说这种方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件，而是子组件通过与父组件的关联关系，获取了父组件的数据。

该方法虽然能实现获取父组件中的数据但是不推荐这种方式，因为vue提倡单向数据流，只有父组件交给子组件的数据子组件才有使用的权限，不允许子组件私自获取父组件的数据进行使用。在父与子的关系中子应当是处于一种被动关系

// 此处的this为子组件实例

this.$parent

通过$emit传递父组件数据 (推荐)

与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用

<my-child @childEvent=“parentMethod”>

子组件

refs获取

可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent

一样并不属于数据的传递而是一种主动的查找。

尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权，而子组件在多数情况下应该为纯视图组件，只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件，子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法，再由父组件处理相应逻辑