父组件向子组件传值

1、父组件向子组件传值的原因：

组件每次引用时，大体结构是一样的，但是有些数据是不一样。这个时候这些不同的数据就需要在引用组件的时候传递进来。

2、组件参数的声明

通过props声明需要传递的参数

　　1、通过数组声明

const comp = {
  props:['参数1','参数2']
}

　　2、通过对象声明

const comp = {
  props:{
    参数1: String,
    参数2: [String,Number,Array]
  }
}

　　3、指定参数的默认值

const comp = {
  props:{
    参数1: {
      type:String,
      default:""
    },
    参数2: {
      type:[String,Number,Array],
      default(){
        return 默认值
      }
    }
  }
}

3、使用参数的方法

使用的时候和使用data一样，可以通过this访问到这些参数，但是这个参数是只读的，不能修改它

4、如何传递参数

　　通过标签的属性传递参数

<标签名  参数名="参数值"  :参数名2="参数值"></标签名>

5、注意事项

1、props参数是只读的，不能修改

2、传参的时候，如果驼峰命名要转成-连接

3、声明参数的时候如果是引用类型，默认值要用函数设置

6、案例

 <template id="search">
        <div>
            <input type="text" name="" id="" v-model="keywords">
            <button @click="search">搜索</button>
        </div>
    </template>
    <script>
        const search = {
            template: "#search",
            data(){
                return{
                    keywords:'',
                }
            },
            methods:{
                search(){
                    this.$emit("search",this.keywords)
                }
            }
        }
        Vue.component("search", search)
    </script>

    <!-- 列表组件 -->
    <template id="list">
        <div>
            <ul>
                <li v-for="item in list" :key="item.id">{{item.name}}</li>
            </ul>
        </div>
    </template>
    <script>
        const list = {
            template: "#list",
            props: {
                list: {
                    type: Array,
                    default() {
                        return []
                    }
                }
            }
        }
        Vue.component("list", list)
    </script>

    <div id='app'>
        <search @search="onSearch($event)"></search>
        <list :list="list.filter(item=>item.name.includes(keywords))"></list>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1,
                        name: "奔驰",
                    },
                    {
                        id: 2,
                        name: "荣威",
                    },
                    {
                        id: 3,
                        name: "大众",
                    },
                    {
                        id: 4,
                        name: "宝马",
                    }, {
                        id: 5,
                        name: "别克",
                    }, {
                        id: 6,
                        name: "吉利",
                    }, {
                        id: 7,
                        name: "雪佛兰",
                    },
                ],
                keywords:'',
            },
            methods: {
                onSearch(e){
                    this.keywords=e;
                }
            }
        })
    </script>