标签：ber 存在 元素 color 事件 基本 页面 rip src
head部分：
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>
body部分的html：
<div id="app"> <testcomponent></testcomponent> <testcomponent-2></testcomponent-2> <testcomponent-3 message="我是一个新的自定义局部组件属性展示"></testcomponent-3> <testcomponent-4 :message="newMessage"></testcomponent-4> </div>
script部分代码：
<script type="text/javascript">
//全局组件，直接用vue.component("组件名",{组件内容})创建，不仅当前页面能用，会被保存在vue中，全局可用
//组件名，全局小写，或用-连接，不要驼峰命名
Vue.component("testcomponent",{
//template 组件描述
template:‘<h1>我是一个新的自定义全局组件</h1>‘
});
new Vue({
el:"#app",
data:{
newMessage:"我是一个新的自定义局部组件属性展示(data动态数据)"
},
//局部组件，仅在当前vue实例中生效
components:{
"testcomponent-2":{
//template 组件描述
template: ‘<h2>我是一个新的自定义局部组件</h2>‘
},
"testcomponent-3":{
//prop自定义属性，props为数组
props: [‘message‘],
template: ‘<h2>{{message}}</h2>‘
},
"testcomponent-4":{
//prop自定义属性，props为数组
props: [‘message‘],
template: ‘<h2>{{message}}</h2>‘
},
"testcomponent-5":{
//prop自定义属性验证，props可为{}
//当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
//type 可以是原生构造器：String,Number,Boolean,Array,Object,Date,Function,Symbol
props:{
//数量类型
propNum:Number,
//多种类型，可以放在数组中
propMuti:[String,Number,Boolean],
//必填验证
propRequired:{
//type为缺省类型，上述的两个就缺省了
type:String,
//required为true为必填
required:true
},
//默认属性值
propDefault:{
type:Number,
default:100
},
//属性值通过函数获得
propGetByFun:{
type:Object,
default: function(){
return 100;
}
},
//自定义的验证函数
propByCreate:{
validator:function(){
return [‘success‘, ‘warning‘, ‘danger‘].indexOf(value) > -1
}
}
}
}
}
});
</script>
这里可以做一个总结了，自定义组件属性主要的作用是父组件往子组件传值，这里我们要知道的是即便我们自定义了组件好像我们是新建了一种，元素类型，其实不然，当我们run之后，就会发现在页面的dom树上依旧是<h1></h1>这样的标签，这也就是我们只是用基本标签通过vue的方式 堆叠起了一个伪的元素类型，这就是一个父组件，它下面的底层的基本标签类型就是子组件，我们通过父组件自定义的属性，把值传给子组件，那么反之如果我们从父组件获得子组件的值，那么就需要自定义事件了。
标签：ber 存在 元素 color 事件 基本 页面 rip src
原文地址：https://www.cnblogs.com/sujinchen/p/14655554.html
