组件传值

父传子(子组件设置props属性)

实例代码

子组件设置
- ```
const app = new Vue({
    ......,
    props:['addList']
})
```
- 1）子组件接收父组件传递的参数，设置的名自定义，但名字一定是有意义的名字，避免后续更改代码更好更改
- 2）接收到的参数可以进行遍历，或者是直接进行使用，直接使用props；里面定义的名字即可
```
<ul>
    <li v-for="item in addList" :key="item.id"></li>
</ul>
```

父组件设置
- 父组件在传递值是，将在定义好在data里面的数据传递给子组件进行使用。
```
<组件名 :add-list='itemList'></组件名>
<script>
  const app = new Vue({
      data:{
          itenList:[1,2,3,4,5,6]
      }
  })
</script>
```
- 子组件设置props命名使用addlist，父组件绑定时使用v-bind绑定 :add-list的形式进行使用
在传值的时候，如果父组件向子组件传递的是字符串，则不需要v-bind绑定，如果传递的是变量，则需要通过v-bind进行绑定

props属性参数

1)、方式一
props: {
    addList: [Array,Object]
}

2)、方式二
props: {
    add;ist: {
        type: [Array, Object],
        required: true,
        default:'默认值',
        validator: function (newValue) {
            return 
        }
    }   
}

参数1：type代表的是，指定传递父组件传递过来的参数是什么类型
参数2：required代表的是，毕传值，意思就是子组件设置了这条属性，必须传递值过来
参数3：default代表的是，默认值，当父组件传递过来的参数，接收不到，子组件将使用默认值进行展示
参数4：validator代表的是，对传递过来的内容做具体的检测，返回一个布尔值，ture执行false不执行。函数内部不可以使用this找到当前组件的data等数据。

子传父

通过使用自定义事件向父组件传递值

子组件发生变化，通过$enit()触发一个自定义事件

使用场景，子组件发生了一些事件，告诉父组件发生了什么事件，并且告诉父组件，现在发生事件这里对应点击的数据是谁，然后给父组件传递过去，父组件根据子组件传递过来的数据，去服务器请求新的数。在传递给子组件，让子组件进行渲染

子组件设置

<button @click='submit(item)'></button>
<script>
 const app = new Vue({
        .....,
        methods: {
          submit (item) {
         this.$emit('onclicks'，item)
       }
        }
    })
</script>

通过点击按钮，发送一个自定义事件，第二个参数是默认值，可以将当前行数据传递给父组件，进行处理

父组件
```
<组件名 @onclicks="btnsLiks"></组件名>
<script>
 const app = new Vue({
      ...,
      methods: {
     btnsLiks (item) {  // 需要接收子组件传过来的默认值
         // 请求数据等处理
     }
   }
 })
</script>
```
- 父组件使用v-on绑定子组件发送过来的自定义事件名@onclicks
- 绑定结束后，需要书写一个方法，处理数据或者是请求等
- 接收参数时，如果是在模板上书写，可以使用$event进行接收, 如果是在处理程序内书写，直接向上面是写一样，进行处理，参数名自定义

组件与v-model

举例说明使用方式

子组件

<img src="value" />
<button @click="submit(item)">上传图片</button>

<script>
 export default {
        props:{
            value: String
        },
        methods: {
            submit () {
                this.$emit('input',item)
            }
        }
    }
</script>

子组件触发按钮，发送一个自定义事件，向父组件传递参数。props是接收父组件传递回来的参数

父组件

<组件名 v-model='images'></组件名>

<script>
 export default {
       data () {
           return {
               images:''
           }
       }
    }
</script>

父组件通过v-model进行参数接收，然后再讲参数返回给子组件

我们知道，v-model 是由v-bind与@input事件构成的，他分开写是下面的形式

<input  :value="value" @input="value = $event.target.value" />

拿那个课程上传课程封面来说，单独抽出来放在一个组件，子组件发送自定义事件，父组件通过v-model进行接收，父组件需要这个参数保存信息，然后在通过父子传值传递给子组件（props），关键来了，在这之间有一个 v-model 特可以分开写成v-bind与@input，我刚才一直想不通的是在这之间，他是怎么把值存起来的，找了一下，发现v-model分开写，@input的部分是这么写的，@input=" 某一个值 = $event.target.传递过来的值 "，我才发现在这之间他把这个值存到了下面的变量里面，在通过父子传值，将这个变量内部的信息传递给子组件，进行使用

非父子组件传值(EvenBus)

是一个独立的事件中心，用于管理不同的组件之间传值操作，特点是独立

使用方式

eventbus是通过新的实例管理组件传值操作，组件通过给实例注册事件，调用事件实现数据的传递

新的vue实例是不需要传递任何选项，比如说el选项等，一般会在单个js文件内部进行定义

var bus = new Vue()

在使用时需要引入js文件

要传递数据的组件

通过组件发送自定义事件，但在处理程序里，不是通过this打点使用$emit，而是通过bus进行调用

<button @click='submit(value)'></button>
<script scr="bus.js"></script>
<script>
 export default {
        ......,
        methods: {
         submit () {
                bus.$emit('change',value)
            }
     }
    }
</script>

接收数据的组件
- 接收参数的组件内部需要通过$on 给bus注册事件
```
<script>
 export default {
        data () {
            return {
                value: ''
            }
        },
        methods: {
            bus.$on('change',function (item) {
             this.value = item
         })
        }
    }
</script>
```
- $on内部需要书写两个参数，第一个参数代表的是，传值组件传递过来的自定义事件名称，参数二是时间处理程序，内部接收到的参数是组件传递过来的值，参数名自定义。

$refs

操作html元素,通过此方法可以获取到html元素

通过给html标签设置ref属性：属性参数自定义名字

然后在通过$refs.属性调用方法

<input  type="text" ref="ipt">
<buttton @click="k">点击按钮</buttton>
<script>
    new Vue({
        el:"#app",data:{},
        methods:{
            k:function(){
                //设置ref通过refs调用
                this.$refs.ipt.focus()
            }
        }
    })
</script>

组件插槽

设置组件的思想，抽取共性，保留不同

最好的方式就是将相同的组件抽取出来，将不同的地方设置成插槽
一旦封装的组件预留插槽，在不同的页面上，根据不同的需求，插入不同内容

vue组件