day3组件传值

1.html属性名不能出现大写。如果变量名是驼峰的话，比如schoolName。在属性名里就写成school-name。

2.父传子，用props接收。

3.子传父。

• 子组件定义一个事件，比如在button触发点击事件chooseEvent，将子组件数据schoolName作为参数传入
• 在changeEvent事件里，利用this.$emit('cschool',schoolName)，定义传值事件cschool和保存要传的值。
• 父组件设置监听@cschool = 'changeEvent'。监听传值事件来触发父组件的修改事件changeEvent
• chanegEvent(data)接收的参数，就是传值事件发送出来的schoolName。再在里面写修的具体内容。

4.父的方法也可通过prop传给子组件。然后在子组件中调用父组件的方法，从而修改父组件数据。

5.子组件可以通过$parent访问到父组件的属性和方法。

6.$root访问根组件。

05 v-model

1. v-model就等价于上面的两个短句，一边向子组件传值，一边是监听子组件的输入事件，接收子组件传过来的值

<input-com :username='username' @input='username=$event'></input-com>
        <!-- 传进去的是username,传出来的值也修改username 用v-model双向绑定-->
        <!-- emit触发的事件名字必须要写input！ -->
        <input-com v-model='username'></input-com>

子组件模板的写法,当输入时，会emit input事件和输入的值。

 Vue.component('input-com', {
            props: ['username'],
            // 绑定输入事件，触发input事件,传当前输入的值$event.target.value
            template: `<input type="text" @input="$emit('input',$event.target.value)" :value="username" \>`
        })

06 插槽

1.可以让我们在自定义标签中间插入内容。

 <div id="app">
       <!-- slot里面的内容变量只跟父元素有关 组件中间的内容都被插到插槽里了-->
       <alert-com1>
           <!-- content的数据也是父组件的 -->
           <p>小心陈老师，{{content}}</p>
       </alert-com1>

子组件，p标签的内容就被插入到slot中间了。

  Vue.component('alert-com1',{
            template: ` 
            <div class="alert">
                <h1>温馨提示</h1>
                <div class="content">
                    <slot></slot>
                </div>
            </div>
            `,

        })

动态组件

根据不同的选择用v-if展现组件。