数据驱动试图
组件使用
创建组件
1.声明组件
一.局部组件
var 组件名={
data(){ //data中必须返回一个对象
return{
}
},
template:'代码、组件'
};
二.全局组件
Vue.component("组件名",{
template:"组件代码"
});
2.挂载组件
new Vue({
el:"绑定元素名" //相当于document.getElementById('元素名'),
data(){
return{
}
},
template:'入口组建'//优先加载包含在内的html、css、js信息,
components:{ //挂载组件
组件名
}
});
3.使用组件
new Vue({
el:"绑定元素名" //相当于document.getElementById('元素名'),
data(){
return{
}
},
template:'</组件名>', 使用组件一定要是闭合标签
components:{ //挂载组件
组件名
}
});
组件通讯
父组件->子组件传值
1.给父组件绑定自定义属性 v-bind:自定义名='传值属性名' 或者 :自定义名='传值属性名'
2.在子组件中使用props:['自定义名']来接收
例子
Vue.component("Test",{
data(){
return{
}
},
template:"<div>{{manager}}-{{type}}</div>", //在子组件中可以直接插值使用
props:["type",'manager'],
});
new Vue({
el:"#app",
data(){
return{
msg:"信息"
}
},
template:'<Test type='primary' v-bind:manager='msg'></Test>',
components:{
Test
}
});
子组件->父组件 1.在父组件中绑定自定义事件 2.在子组件中触发传值事件例如：input 在触发方法中使用 emit方法参数：emit('父组件中自定义事件名',传递消息数据)
例子:
Vue.component("Test",{
data(){
return{
manager:""
}
},
template:"<div> 子组件： <input type='text' v-model='manager' @input='触发事件名(传递数据名称)'></div>",
methods:{
触发事件名(val){
console.log(val);
this.$emit('父组件中自定义事件名',val) //自定义事件名称一定要使用$emit触发
}
}
});
new Vue({
el:"#app",
data(){
return{
manager:""
}
},
template:"<div class ='app' ><p>父组件 </br>子组件传过来的值->{{manager}}</p>"
+" <Test @自定义事件名='实现方法'> </Test> "
+ "</div>",
methods:{
实现方法(val){
console.log(val)
this.manager=val
}
}
});