vue -------组件

全局注册

//注册
Vue.component("MyComponent",{
        template:"
我是全局注册的mycomponent
 数据是{{mymessage}}",
        data:function () {
            return {
                mymessage:"我是全局组件里的数据"
            }
        }
    })

创建实例

// 创建根实例
new Vue({
  el: '#example'
})

html

局部注册

var HelloWorld={
        template:"
我是helloworld组件{{message}}点击我切换组件
",
        //结论：组件里的data一定要用function方式，不让会传址
        data:function () {
            return obj;
        },
        methods:{
            changemessage:function () {
                this.message="我是测试数据2"
            }
        }
    }
    //局部定义组件
var Child={
    template:"
我是局部注册组件
",
    components:{
        HelloWorld:HelloWorld
    }
}

实例化

new Vue({
        el:"#app",
        data:{
            message:"wishing",
            judge:false
        },
        components:{
            MyComponent:Child,
            helloworld:HelloWorld
        }
    })

组件的传参

通过属性传递

接收属性通过

 props:['username','height','color']

动态props通过v-bind:属性，来进行绑定

Prop验证(注意必须是开发版vue)

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告,生产版本删除了警告

props:{
    data: {
        type: [Number,String],
        default: 100,
        required:true
    },
},

组件引入方式

1.直接引入

   模板中使用标签或者是

2.通过js引入

自定义事件($emit第二个参数传递值)

{{ DadData }}