vue的组件通讯之父子通讯

可复用的搜索组件
* 组件通讯
* 父 -> 子

             1. 在组件标签中写入属性
             2. 在组件配置中声明props

props数据验证
- 限定类型
- 指定默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父-》子</title>
    <script src="vue.js"></script>
    <style>
        #app>div{
        	padding:20px;
        	margin:20px;
        	border-bottom:1px solid #ddd;
       	}
    </style>
</head>
<body>
    <div id="app">
        <div>
            <search id="city" :datalist="citylist"/>
        </div>
        <div>
            <search id="h5" :datalist="h5list" type="查询"/>
        </div>
        <div>
            <search v-bind:datalist="['aa','bb','cc']"/>
        </div>
    </div>
    <template id="templateSearch">
        <div>
            <input type="search" :list="id+'Result'"><button>{{type}}</button>
            <datalist :id="id+'Result'">
                <option v-for="item in datalist" :key="item" :value="item">{{item}}</option>
            </datalist>
        </div>
    </template>
    <script>
        // 定义全局组件
        Vue.component('search',{
            // 声明props属性（properties的简写）
            // 等效于在data中设置datalist属性
            //1、 props:['datalist','id','type'],

            // 2、props数据验证
            props:{
                // 限定datalist的数据必须为数组
                datalist:{
                    type:Array,
                    required:true
                },
                type:{
                    type:String,
                    default:'搜索'
                },
                id:{
                    default:'search'
                }
            },
            data(){
                return {
                    // 3、datalist:[]
                }
            },
            template:`#templateSearch`
        });


        let vm  = new Vue({
            data:{
                citylist:['北京','上海','广州','深圳','杭州','东莞','成都'],
                h5list:['HTML','CSS','Javascript','Ajax','Vue','React']
            },
            el:'#app'
        })

        

    </script>
</body>
</html>

vue的组件通讯之父子通讯

猜你喜欢