组件中数据的绑定
在vue中数据通过data属性进行绑定，如下
Document
{{name}}
new Vue({
el: '#app',
data: {
name:'python'
}
})
在组件中进行数据绑定虽然也是通过data属性，但是对应的值不再是{}json形式，而是一个函数方法。如下
Document
// 局部组件注册,定义局部组件
var zujian_a={
template:'局部组件1',
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局中使用绑定的数据 {{name}}
template:'全局组件 {{name}} ',
// components 将局部组件注册到全局组件中
components:{
zujian_a,
},
// data属性指定绑定的数据内容，可以在当前的组件中进行使用
data:function(){
return {name:'python'}
}
}
)
new Vue({
el: '#app',
})
【各个组件只能调用本组件内部的数据】
组件传值父组件给子组件传值，组件中通过props属性传递数据，如下：
Document
// 局部组件注册,定义局部组件
var zujian_a={
template:'局部组件1 {{pos}} ',
// 在子组件中通过props属性定义接受值的名称
props:['pos']
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值
template:'全局组件 ',
// components 将局部组件注册到全局组件中
components:{
zujian_a,
},
// data属性指定绑定的数据内容，可以在当前的组件中进行使用
data:function(){
return {name:'python'}
}
}
)
new Vue({
el: '#app',
})
子组件给父组件传值，通过$emi将数据传递个父组件
Hello Ming
var zujian_a={
template:' 局部组件A 上传 ',
methods:{
isupload:function(){
this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件
}
}
}
Vue.component('zujian_all',{
template:' 全局组件 ',
components:{
zujian_a
},
methods:{
isShow:function(data){
alert(data) //data参数接受子组件传递的值
}
}
})
new Vue({
el:'#app'
})
【不同属性之间用逗号隔开】
