props 、非prop特性和 solt 用法

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
           }
}
               

非 Prop 的特性　　

       一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

      因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

 　　对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。

　　

//父组件

<vModel v-model="textValue"  class="username-input" placeholder="Enter your username" :a='1'></vModel>

//子组件

<template>
    <!-- v-model实现 -->
 
         <input
            type="text"
            v-bind='$attrs'
            :value="value"
            @input="input"
        >
        <!-- <input
            :value="value"
            @change="change"
        > -->
 
 
</template>
<script>
export default {
  inheritAttrs: false,   //当在子组件中加入inheritAttrs:false时class等属性就不会自动加到根元素上了。
  name: "HelloWorld",



  //   model: {
  //     //一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框
  //     //等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：
  //     prop: "value",
  //     event: "change"
  //   },



  props: ["value"],
  data() {
    return {};
  },
  methods: {
    input(e) {
      this.$emit("input", e.target.value);
      console.log(e.target.value);
    }
    // change(e) {
    //   this.$emit("change", e.target.value);
    //   console.log(e.target.value);
    // }
  },
  mounted() {
    console.log(this.$attrs);   //  {placeholder: "Enter your username", a: 1}    不包含class
  }
};
</script>

$attrs存储非prop特性，inheritAttrs控制vue对非prop特性默认行为　

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>

　　

　　结果：

　　

<template>

<!-- v-model实现 -->

 

<input

type="text"

v-bind='$attrs'

:value="value"

@input="input"

>

<!-- <input

:value="value"

@change="change"

> -->

 

 

</template>

<script>

export default {

inheritAttrs: false,

name: "HelloWorld",

// model: {

// //一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框

// //等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

// prop: "value",

// event: "change"

// },

props: ["value"],

data() {

return {};

},

methods: {

input(e) {

this.$emit("input", e.target.value);

console.log(e.target.value);

}

// change(e) {

// this.$emit("change", e.target.value);

// console.log(e.target.value);

// }

},

mounted() {

console.log(this.$attrs);

}

};

</script>