Vue学习笔记（四）
【书接上文】Vue学习笔记（一）
【书接上文】Vue学习笔记（二）
【书接上文】Vue学习笔记（三）
Vue的组件
当徐建使用驼峰结构命名时，Vue底层会把大写字母变成小写，导致使用驼峰结构命名的组件无法找到。
如果一定要使用驼峰结构，引用组件时要使用连字符（例：myCom->my-com）
组件的创建方式
方式一
Vue.component("mycom", com1);
参数1：组件名称，自定义的
参数2：创建处理的组件模板对象
<div id="root">
<!-- <myCom></myCom> -->
<!-- 如果是驼峰结构 标签要加横杠 -->
<my-com></my-com>
</div>
<script>
var com1 = Vue.extend({
template: "<h1>!!!!</h1>"
})
Vue.component("my-com",com1);
new Vue({
el: "#root",
})
</script>
方式二
<div id="root">
<root-head></root-head>
<root-main></root-main>
<root-footer></root-footer>
</div>
<script>
Vue.component("root-head",{
template: "<h1>我是标题!!!</h1>"
});
Vue.component("root-main",{
template: "<h1>我是页面主体!!!</h1>"
});
Vue.component("root-footer",{
template: "<h1>我是尾部!!!</h1>"
});
new Vue({
el: "#root",
})
</script>
方式三
<div id="root">
<thehead></thehead>
</div>
<div id="app">
<login></login>
</div>
<!-- 模板 -->
<!-- 组件只能有一个根节点 -->
<template id="header">
<div>
<h1>我是头部</h1>
</div>
</template>
<template id="login">
<div>
h1>我是登录组件</h1>
</div>
</template>
<script>
Vue.component("thehead", {
template: "#header"
});
new Vue({
el: "#root",
})
new Vue({
el: "#app",
//定义私有组件
components: {
login: {
template: "#login"
}
}
})
</script>
组件中的data
组件中的data要这么写：
data() {
return {
}
}
注意：组件中的data必须是一个函数！！！
组件切换
component 是vue提供的标签，展示对应名称的组件。
is是component的属性 用来指定组件名称
<component :is="a"></component>
组件传值
父传子
- 父组件向子组件传值
- 1.给子组件定义属性 属性的值为要传的值
- 2.在子组件的props选项中,添加自定义属性
props: ["parentmsg"],
- 3.在子组件中 直接使用对应的属性即可
<button @click="changeValue">父组件向子组件传的值:{{ parentmsg }}
注意：props对应的属性都是只读的
<div id="root">
<h1>{{ msg }}</h1>
<com :parentmsg="msg"></com>
</div>
<template id="tmp">
<div>
<button @click="changeValue">父组件向子组件传的值:{{ parentmsg }}</button>
</div>
</template>
<script>
Vue.component("com", {
template: "#tmp",
props: ["parentmsg"],
methods: {
changeValue() {
this.parentmsg=999
}
},
})
new Vue({
el: "#root",
data: {
msg: 666,
},
})
</script>
子传父
- 子组件向父组件传值
- 1.给子组件自定义事件 时间的响应函数为父组件的方法
func:自定义事件的名称 show:事件的响应函数 <com v-on:func="show"></com>- 2.当子组件需要传值时 触发事件，除第一个参数外 其他都为向父组件传递的值
this.$emit("func","son","123");
- 3.在父组件定义响应函数，形参是接受传递的值
methods: { show(data,res){ console.log(data,res); this.a = data; } }
例子：
<div id="root">
<h1>我是父组件 接收到的值是:{{a}}</h1>
<com v-on:func="show"></com>
</div>
<template id="tmp">
<div>
<h1>我是子组件</h1>
<button @click="btnClick">向父组件传值</button>
</div>
</template>
<script>
Vue.component("com", {
template: "#tmp",
methods: {
btnClick() {
//$emit用来触发事件(触发某个时间的响应)
//触发的是func这个事件 show是响应函数
this.$emit("func", "son", "123");
}
},
})
new Vue({
el: "#root",
data: {
a: ""
},
methods: {
show(data, res) {
console.log(data, res);
this.a = data;
}
},
})
</script>
子组件向子组件传值
bus方法
首先创建两个组件
<template id="tmp1">
<div>
我是xxx,我要对ccc说:
<button @click="btnClick">告诉ccc,I LOVE U </button>
</div>
</template>
<template id="tmp2">
<div>
我是ccc ,xxx对我说 :{{ msg }}
</div>
</template>
在script中定义这两个组件
<script>
const bus = new Vue();
Vue.component("xxx",{
template:"#tmp1",
methods: {
btnClick() {
bus.$emit("love","I LOVE U")
}
},
});
Vue.component("ccc",{
template:"#tmp2",
data() {
return {
msg:"",
}
},
mounted() {
//注册事件 也叫绑定事件
//参数1:事件名称(自定义)
//参数2: 事件响应函数
var _this = this;
bus.$on("love",function (data) {
console.log(data);
_this.msg = data;
})
},
});
new Vue({
el:"#root",
})
</script>
在app中添加这两个组件
<div id="root">
<xxx></xxx>
<ccc></ccc>
</div>
