Vue 组件小结
自己学习时记录，略混乱，可能有错，不属于教程，慎读！
1. 全局组件/局部组建语法
全局：
<div id="app">
<my-component></my-component>
</div>
<script>
// 注册
Vue.component('my-component', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
局部：
<div id="app">
<my-component></my-component>
</div>
<script>
var Child = {
template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
el: '#app',
components: {
'my-component': Child
}
})
</script>
2. 组建的data属性必须是function return形式
其它属性methods compute跟正常一样
Vue.component("my-component",{
template: '<div>模版：{{ Msg }}' +
'</div>',
data: function() {
return {
Msg: "属性"
};
}
});
3. props：父组建给子组建传数据
- props可以是数组也可以是object
- warningGMessage是子组建props中的一个值
- 在父组建里props是一个属性，可以用v-bind动态绑定如下例
- 如果传的是基础类型Number、string这种，只能由父传递向子，父改变，子会变，反之不行，会出warning。这是vue2的一种安全性设计。如下例1，会出warning。
- 解决方法可以复制一份如例2，这样相当于用父给子赋值
- 但如果传的是object，父子共享，无论复制不复制都共享，因为是引用如例3
//例1
//html
<div id="app" >
<input type="text" v-model="parentMessage">
父节点: {{ parentMessage }}
<my-component :warning-g-message="parentMessage"></my-component>
</div>
Vue.component("my-component",{
props: ['warningGMessage'], //因为js代码要用所以用驼峰不用-连接，html里用-在大写字母前warning-g-message
template: '<div>模版：{{ warningGMessage }} <input type="text" v-model="warningGMessage"/> ' +
'</div>',
});
var app = new Vue({
el: '#app',
data: {
parentMessage: "DOM传递"
}
});
//例2
//html
<div id="app" >
<input type="text" v-model="parentMessage">
父节点: {{ parentMessage }}
<my-component :warning-g-message="parentMessage"></my-component>
</div>
Vue.component("my-component",{
props: ['warningGMessage'], //因为js代码要用所以用驼峰不用-连接，html里用-在大写字母前warning-g-message
template: '<div>模版：{{ Msg }} <input type="text" v-model="Msg"/> ' +
'</div>',
data: function() {
return {
Msg: this.warningGMessage
};
}
});
var app = new Vue({
el: '#app',
data: {
parentMessage: "DOM传递"
}
});
//例3
//html
<div id="app" >
<input type="text" v-model="parentMessage">
父节点: {{ parentMessage.msg }}
<my-component :warning-g-message="parentMessage"></my-component>
</div>
// vue
Vue.component("my-component",{
props: ['warningGMessage'], //因为js代码要用所以用驼峰不用-连接，html里用-在大写字母前warning-g-message
template: '<div>模版：{{ Msg.msg }} <input type="text" v-model="Msg.msg"/> ' +
'</div>',
//template: '<div>模版：{{ warningGMessage.msg }} <input type="text" v-model="warningGMessage.msg"/> ' +
'</div>',
data: function() {
return {
Msg: this.warningGMessage
};
}
});
var app = new Vue({
el: '#app',
data: {
parentMessage: {
msg:"DOM传递"
}
}
});
4. 子给父传数据：自定义事件
- 子用$emit("事件名", 参数) //这个事件名要用xxx-xxx的形式，不能驼峰命名
- 父用@事件名相应，然后参数就是传递的数据了，下面给一个比较复杂的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue test</title>
</head>
<body>
<div id="app" >
<input type="text" v-model="parentMessage">
父节点: {{ parentMessage.msg }}
<my-component :warning-g-message="parentMessage"></my-component>
</div>
<div id="app2" >
<input type="text" v-model="parentMessage">
<my-component :warning-g-message="parentMessage" @child-clk="handleChildClk"></my-component>
<parrent-component></parrent-component>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="components.js"></script>
</body>
</html>
Vue.component("my-component",{
props: ['warningGMessage'], //因为js代码要用所以用驼峰不用-连接，html里用-在大写字母前warning-g-message
template: '<div>模版：{{ warningGMessage.msg }} <input type="text" v-model="warningGMessage.msg"/> ' +
'<button @click="handleClk">click</button>' +
'</div>',
data: function() {
return {
Msg: this.warningGMessage
};
},
methods: {
handleClk: function() {
console.log("child handleClk");
this.$emit('child-clk', "来自子组建的消息"); // 不能用驼峰命名
}
}
});
Vue.component("parrent-component",{ //真正用组件作为父组件
template: '<div>{{parentMessage.msg}}<br />' +
'<my-component :warningGMessage="parentMessage" v-on:child-clk="handleChildClk"></my-component>'+
'</div>',
data: function() {
return {
parentMessage: {
msg: "parrent-component消息"
}
}
},
methods: {
handleChildClk: function(chldmsg) {
console.log(chldmsg);
this.parentMessage.msg += chldmsg;
}
}
});
var app = new Vue({
el: '#app',
data: {
parentMessage: {
msg:"DOM传递"
}
}
});
var app2 = new Vue({
el: '#app2',
data: {
parentMessage: {
msg:"DOM传递app2"
}
},
methods: {
handleChildClk: function(chldmsg) {
console.log(chldmsg);
this.parentMessage.msg += chldmsg;
}
}
});