记录第三天-Vue组件

前言

今天继续整理VUE组件知识点，冲冲冲！！！

一.父子组件传值

父子组件传值大体流程

1.通过prop往子组件通信

• 父>子

• 1.先给父组件中绑定自定义的属性
• 2.在子组件中使用props接受父组件传递的数据
• 3.可以在子组件中任意使用

Vue.component('Chlid',{
        template:`
        <div> 
         <p>我是一个子组件{{chlidDate}}</p>
         <input type="text" v-model='chlidDate'/>
        </div>
        `,
        props:['chlidDate']
       }); 
      Vue.component('Parent',{
        data(){
          return{
            msg:"我是父组件的数据"
          }
        },
        template:`
        <div> 
         <p>我是一个父组件</p>
         <Chlid :chlidDate ='msg' />
        </div>
        `
      });

- 子→ 父

• 1.在父组件绑定 自定义的事件
• 2.在子组件中触发原生的事件 在函数中使用$emit触发自定义的chlidHandler

// 1. parent 2.Child
       Vue.component('Chind',{
         template:`
         <div> 
          <p>我是子组件</p>
          <input style='text' v-model='chlidData'  @input='changeValue(chlidData)'/>
         </div>  
         `  ,
          props:['chlidData'],
          methods:{ 
            changeValue(val){
              //$emit(自定义的事件名,消息)
              this.$emit('childHandler',val)
            }
          }
       })
        Vue.component('Parent',{
        data(){
          return{
            msg:'我是父组件的数据'  
          }
        },
        template:`
        <div>
        <p>我是父组件</p>
        <Chind :chlidData = 'msg'  @childHandler ='childHandler'/>
        </div>
        `,
        methods:{
          childHandler(val){
            console.log(val);
          }
        }
      });

二.具名插槽

• 插槽 内置组件 slot 做为承载分发内容的出口
• 进行封装组件

<div id="app"></div>
    <script type="text/javascript">
      Vue.component('myLi',{
        template:`
         <li>
           预留的第一个坑
           <slot name='two'></slot>
           预留的第二个坑
           <slot name='three'></slot>
         </li>
        `
      });
      var App={
        template:`
        <div>
         <ul>
          <myLi>
          <h2 slot='two'>我是第一个坑</h2>
          <h3 slot='three'>我是第二个坑</h3>
          </myLi>
         </ul>
        </div>
        
        `
      };
      
      new Vue({
        el:'#app',
        components:{
          App,
        },
        template:`<App/>`
      })

结尾

在这里整理了 关于组件 父子之间互相传值的方法以及传值过程的流程。能够清楚父子之间的传值，主要运用到props传值方面，在组件之间互相传值的方法还有很多种，在以后我会逐步整理出来，一起学习喜喜。 在这里还有提到具名插槽，运用可以减少代码臃肿的问题，可以让代码简洁一些。