Vue的学习与使用（四）

一、组件的使用

1.1.父传子通过prop传值

子组件中：

 

 1.2.props的基本语法

<script>
 export default{
    //第一种形式：字符串
    //props:['message']
    //第二种：对象形式
    props:{
        //1.类型的限制
       // message:String
       //2. 设置默认值,必传值
       message:{
        type:String,
        default:"你好",
        required:true
       },
       list:{//对象或数组的默认值从一个工厂函数返回
        type:Array,
        default(){
            return []
        }

       }
    }
 }
</script>

 单向数据流：所有的prop都使得父子之间形成了一个单向下行绑定

1.3、子组件通过自定义事件向父组件传值

父把东西给子，很简单，你收也得收，不收也得收；子传父有点儿复杂，要搞个事件监听，父主动接收，差不多就这意思

 父组件代码：

methods:{
//定义一个接受子组件数据的函数
    getChildMsg:function(value){
      console.log(value);
      this.message=value;
}
}

<div> 
    <!-- 1.拿到子组件Content的数据，通过自定义事件 -->
    <!-- 2.在父组件中，通过v-on监听子组件中自定义的事件 -->
   <Content @injectMsg="getChildMsg"></Content>
   <p>--------------</p>
   <h2>{{ message }}</h2>
</div> 

子组件：

<button @click="sendParent"> 提交数据给父组件</button>  
 methods:{
      //在子组件中，通过$emit来触发事件
      //this.$emit('事件的名称','发送数据的参数')
      sendParent:function(){
        this.$emit('injectMsg',this.msg)
        


      }

    },

初始界面：

传输完成：

 

 1.4 父子组件的访问方式

二、插槽的基本使用

 留一个坑,使用<slot></slot>填满  

<Content>
  <!-- v-slot 只能添加在<template>上 -->
    <!-- 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的 -->
  <template v-slot:button><button>按钮{{ message }}</button></template>
  <template v-slot:input><input type="text"> </template>
  <template v-slot:h2><h2>插槽</h2></template>
</Content>

2.1 默认插槽（备用内容）

 2.2 作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

<!-- 作用域插槽：父组件替换插槽的标签，但是数据有子组件来提供 -->
<!-- 无序列表 -->
<Content>
<template v-slot:default="slotProps">
<ul>
  <li v-for="item in slotProps.list" key="item">{{ item }}</li>
</ul>
</template>
</Content>
<!-- 有序列表 -->
<Content>
  <template v-slot:default="slotProps">
<ol>
  <li v-for="item in slotProps.list" key="item">{{ item }}</li>
</ol>
</template>
</Content>

 

 三：Provide/inject

 

  

 

 响应式：

 

//provide/inject并不是响应式
       // provide:{message:"HelloWorld"},
    //如果想去访问组件实例的属性，函数
    provide(){
        return{
        //浅拷贝 
           // obj:this.obj//1.响应式对象方式发送，inject:["obj"]接收
           message:()=>this.message//函数返回响应式数据


        }

    },