vue-入门第三天（组件）

1、作用：

组件可以扩展 HTML 元素，封装可重用的代码。

2、注册一个全局组件语法格式如下：

Vue.component(id, [definition])

id为组件名，[definition]为配置选项。注册后，我们可以使用以下方式来调用组件：

<id></id>

3、全局组件

<div id="app">
       <app-search></app-search>
    </div>
Vue.component("app-search", {
    template:` <div class="searcher">
            <input type="text" placeholder="电影">
            <button></button>
        </div>`
})
var app = new Vue({
    el:"#app"
})

效果图：

4、prop

①prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

<<div id="app">
      <app-search tip="hello"></app-search>
    </div>
    <script>
Vue.component("app-search", {
props:["tip"],
    template:` <div class="searcher">
            <input type="text" :placeholder="tip">
            <button></button>
        </div>`
})
var app = new Vue({
    el:"#app"
})
</script>

修改了placeholder的值；
效果图：

②用 v-bind 动态绑定 props 的值到父组件的数据

<div id="app">
        <ul>
        <app-search :tip="item" v-for="item in text"></app-search>
    </ul>
     </div>
Vue.component("app-search", {
    data() {
        return {
            
        }
    },
    props:["tip"],
    template:` <li>{{tip.name}}</li>`
})
var app = new Vue({
    el:"#app",
    data() {
        return {
            text:[
                {name:"张三"},
                {name:"王五"},
                {name:"李四"}
            ]
        }
    },
})

每当父组件的数据变化时，该变化也会传导给子组件：

③Prop 验证

props:{
                type:{
                    type:String,
                    required: true
                },
                size:{
                    type:String
                }
            }

required: trueb必填字符串
default: 100：默认数值
type 的类型：
String
Number
Boolean
Array
Object
Date
Function
Symbol
type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认