props 和 solt 用法

Posted 2021-01-04 cuikaitong

props 

　　子组件内接收来自父组件传递过来的数据集合

　　两种写法：

　　　　1、 props : [‘todos‘,‘item‘]

　　　　2、 

props:{  ‘todos‘ : String , ‘item‘: Array }
//或者
props :{
        ‘todos‘:{
           type: Number,       //数据类型
           default: 0,            //默认值
           required: true,
           validator: function (value) {     //自定义校验
                return value >= 0
           }
}
               

 

solt   插槽  

　　子组件

　　

<template>
    
    <ul>
        <li v-for="(item, index) in todos" :key="index">
            <slot :todo=‘item‘>
                这是默认组件的todo{{item}}  
            </slot>
        </li>
    </ul>
</template>
<script>
export default {
  props: {
      todos: Array
    },
  data () {
    return {}
  },
  mounted() {
      console.log(this.todos);
  },
}
</script>
<style lang="scss" scoped>

</style>

　　

父组件

<template>
  <div class="home">
    <img alt="Vue logo" src="@/assets/logo.png">
    
    <TodoList :todos = ‘listArray‘>
          <span slot-scope="{todo}">这是不一样的todo{{todo}}</span>
    </TodoList>

    <TodoList :todos = ‘listArray‘></TodoList>
    <TodoList :todos = ‘listArray‘>
        {{name}}
    </TodoList>
    
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from ‘@/components/HelloWorld.vue‘
import TodoList from ‘@/components/list.vue‘

export default {
  data () {
    return {
      name:‘这是作用域测试‘,
      listArray: [
        { id: 1, value: ‘this is ad1‘ },
        { id: 2, value: ‘this is ad2‘ }
      ]
    }
  },
  components: {
    HelloWorld,
    TodoList
  }
}
</script>

　　

　　结果：