VUE组件

组件

组件Component是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码

所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子

注册全局组件

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

Vue.component(tagName, options)
// tagName：组件名
// options：配置选项

比如这样一个全局组件

Vue.component('button_show', {
    data: function () {
        return {
            count: 0
        }
    }, // 当前组件会需要的数据，定义为函数的返回值
    template: '<button @click="count++">按钮:{{ count }}</button>'
    // 组件的标签模板
})

• 接下来可以在任何Vue接管的元素中使用该组件，

<div id="container">
    <button_show></button_show>
</div>

window.onload = function () {
    var vm = new Vue({
    	el: "#container",
    })
}

组件data

组件就是vue的实例，所有vue实例中属性和方法，组件中也可以用

其中data属性必须是一个函数，因为组件会重复使用在多个地方，为了使用在多个地方的组件数据相对独立，data属性需要用一个函数的返回值来将数据处理为不同的每个个体

prop

Prop是你可以在组件上注册的一些自定义特性

当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性

为了给组件传递数据，我们可以用一个 props 选项将一些特性值列举在其中

这在未来学习vue脚手架组件传值时也会用到，该方法也被称为父子组件传参数

Vue.component("myp",{
    props: ["content","like"], // 需要两个外界传入的值
    template: "<p :class='like'>{{ content }}</p>"
    // 组件绑定未来要接受的变量，要用到v:bind
})
var vm = new Vue({
    el: "#container",
    data: {
        content: '这是p段落的文本',
        like: 'beauty', // 要传递的变量
    }
})

.beauty{
    width: 100px;
    color: red;
    background: green;
}

<div id="container">
    <myp :like="like" :content="content"></myp>
    <!-- 传递到组件中 -->
</div>