Vue基础实例二（组件）
2019-03-31 本文已影响0人
IT飞牛
本人生活在一个3线小城市，本地的企业在考虑mvvm框架的时候，几乎都选择了Vue，
灵活、生态齐全、学习成本低、配套文档和相关教程丰富等等一系列的优势，使得Vue这个框架在国内异常火爆。而且最近出了uni-app，号称一套代码可以编译出多套代码，大大的减轻开发工作量。所以，我也随大流，踏入Vue。
本系列实例都是简单的Vue功能演示，纯属个人学习记录用，大神请绕行。
注意：
1、子组建模板中必须带有合法的根标签，不能直接写字符串
2、调用组建时的原生js事件，会被转变成自组建的自定义事件。例如@click，就需要在自组建的methods中自定一个click
实例效果：
Vue基础实例二（组件）.gif
代码：
代码中分别定义了全局组件和局部组件。
全局组件：可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
深入了解请点击：组件注册
1、定义组件名时如果使用驼峰命名，则使用组件时需要将大写字母拆封成
-分割字符串，例如：TudoList，则使用时需要<tudo-item :item="item" :index="index" @delitem="deleteItem($event)"></tudo-item>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.style1 {
line-height: 150%
}
</style>
</head>
<body>
<div id="app" class="style1">
<ul v-for="(item,index) in lists">
<tudo-item :item="item" :index="index" @delitem="deleteItem"></tudo-item>
<!--等效于@delitem="deleteItem($event)"-->
</ul>
<input type="text" v-model="keyword">
<button @click="addItem">添加</button>
</div>
</body>
</html>
<script>
// Vue.component("tudo-item", {
// props: ["item", "index"],
// template: '<li>{{item.id}}-{{item.name}} <font color="red" size="0" style=" cursor:pointer" @click="function(){deleteItem(index)}">X</font></li>',
// methods: {
// deleteItem: function (i) {
// this.$emit("delitem", i);
// }
// }
// })
var TudoItem = {
props: ["item", "index"],
template: '<li>{{item.id}}-{{item.name}} <font color="red" size="0" style=" cursor:pointer" @click="function(){deleteItem(index)}">X</font></li>',
methods: {
deleteItem: function (i) {
this.$emit("delitem", i);
}
}
};
var app = new Vue({
el: "#app",
components: {
"tudo-item": TudoItem
},
data: {
keyword: "",
lists: [
{ id: 1, name: "这是第一个" },
{ id: 2, name: "这是第二个" },
{ id: 3, name: "这是第三个" },
{ id: 4, name: "这是第四个" },
{ id: 5, name: "这是第五个" }
]
},
methods: {
addItem: function (event) {
this.lists.push({ id: this.lists.length + 1, name: this.keyword });
this.keyword = "";
},
deleteItem: function (index) {
this.lists.splice(index, 1);
}
}
})
</script>
非父子组件传值：
假如有组件aaa和bbb，希望点击aaa中按钮，bbb能收到aaa中点击事件并接受传值。
其实就是在Vue原型链上添加一个bus属性，属性值是个Vue实例。那么在Vue实例中就可以使用bus的this.bus.$emit("事件名",值)、this.bus.$on("事件名",function(msg){...表达式...})，进行广播事件和监听事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.style1 {
line-height: 150%
}
</style>
</head>
<body>
<div id="app" class="style1">
<aaa></aaa>
<bbb></bbb>
</div>
</body>
</html>
<script>
Vue.prototype.bus = new Vue();
var aaa = {
template: '<button @click="clickA">点击组件aaa</button>',
methods: {
clickA: function () {
this.bus.$emit("clickA", "组件A中点击事件传值");
}
}
};
var bbb = {
template: '<span>{{content}}</span>',
data: function () {
return {
content: ""
}
},
mounted: function () {
this.bus.$on("clickA", (msg) => {
this.content = msg;
})
},
};
var app = new Vue({
el: "#app",
components: {
"aaa": aaa,
"bbb": bbb
}
})
</script>
slot父子组件传值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.style1 {
line-height: 150%
}
</style>
</head>
<body>
<div id="app" class="style1">
<aaa>
<div slot="header">header</div>
<div slot="footer">footer</div>
</aaa>
</div>
</body>
</html>
<script>
var aaa = {
template:
`<div>
<slot name="header"></slot>
<slot name="footer"></slot>
</div>`,
};
var app = new Vue({
el: "#app",
components: {
"aaa": aaa
}
})
</script>
动态组件：
<child-one v-if='type=="child-one"'></child-one>
<child-two v-if='type=="child-two"'></child-two>
等同于：
<component :is="type"></component>//根据is后面跟着的组件名，动态调用组件来显示
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.style1 {
line-height: 150%
}
</style>
</head>
<body>
<div id="app" class="style1">
<child-one v-if='type=="child-one"'></child-one>
<child-two v-if='type=="child-two"'></child-two>
<!--<component :is="type"></component>-->
<button @click="toggle">点击</button>
</div>
</body>
</html>
<script>
var childone = {
template: `<div>child-one</div>`,
};
var childtwo = {
template: `<div>child-two</div>`,
};
var app = new Vue({
el: "#app",
components: {
"child-one": childone,
"child-two": childtwo,
},
data: {
type: "child-one"
},
methods: {
toggle: function () {
this.type = this.type == "child-one" ? "child-two" : "child-one";
}
}
})
</script>
