Vue学习笔记-4

组件基础

    概念：组件即为定义好的，可以重复使用的部分。

Vue.component('这里给你的组件起名字', {
  data: function () {
    return {
     数据写在这里
    }
  },
  template: '这里写组件中的控件'
})

定义完成后只需要用组件名的标签就可以使用组件了

通过上面的格式你会发现data并没有写为单纯的数据而是一个函数，通过这种方式组件之间的值相互分离不干扰。

二、组件传递信息的方式

prop：

用于自定义组件的某些特性，可以为多个值，当你将其传递给组件实例时，这个实例就获得了这个值作为其属性。当prop需要传入的值过多时，你可以传递一个数据集，减少命名的复杂性。

#每个组件必须只有一个根元素，意味着你在设计组件时需要将多个内部内容最终包含到一个父元素中。

通过事件像父级组件发送消息：

通过在触发事件中添加如下格式的事件抛出，再到父组件中监听这个事件可以达到抛出响应的效果

     $emit('事件名')

如果需要传递一个值则表达方式为

           $emit('事件名'，'值')

在它的外层组件响应中可以用$event访问到这个值，如果响应处理调用了一个方法这个值会被当做第一个参数传入。

三、在组件上使用v-model

    首先我们要明白

<input v-model="searchText">

等价于：

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >

 

v-bind：value=“searchText”将“searchText”这个特性传递给输入框，然后v-on:input=“searchText = $event.target.value”将输入框的值赋给这个名为searchText的变量。

 在组件使用v-model属性时采用的是下面这个处理方式，和直接调用v-model类似。

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

然而在组件的调用中v-bind:value是用来给prop传值的。

所以在组建中我们定义一个prop来接收这个值，并且把这个值以相同的形式传递给传递给组件中的输入框。

$event是用来接收组件组件抛出事件中传递的值，而v-on：监听的是名为input的事件，所以在组件内部的输入框我们需要将取到的值以名为“input”的事件抛出，并且将值传递出去。

Vue.component('custom-input', { props: ['value'], template: <input v-bind:value="value"      v-on:input="$emit('input', $event.target.value)"《---这里$emit('事件名为input','传递的值为$event.target.value，即从输入框取到的值')---》    > })

接下来在组件的调用时就可以使用v-model属性了。

四、通过插槽分发内容

   为了使得组件标签能像HTML标签一样<>在这内部填写内容并显示<>，我们需要运用<sort></sort>元素，将这一元素添加到组件中你希望显示的位置，就可以在组件标签中传值了。