标签：send event 接收 相同 自己 str 元素 rop rip
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<global_com></global_com>
<global_com></global_com>
<global_com></global_com>
</div>
<div id="app1">
<global_com></global_com>
</div>
<script src="vue.js"></script>
<script>
// 全局注册， 第一个时组件名，第二个参数是个对象
Vue.component("global_com", {
template: `<div><h1>{{global_data}}</h1></div>`,
data(){
return{
global_data:"全局注册测试"
}
}
});
const app = new Vue({
el: "#app"
});
const app1 = new Vue({
el: "#app1"
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my_com_name></my_com_name>
</div>
<!--局部注册到了app下，所以下面的app1没有-->
<!--<div id="app1">-->
<!--<my_com_name></my_com_name>-->
<!--</div>-->
<script src="vue.js"></script>
<script>
let my_com = {
template:`<div><h1>{{my_data}}</h1></div>`,
data(){
return {
my_data: "局部注册测试"
}
}
};
const app = new Vue({
el: "#app",
components:{
my_com_name:my_com
}
});
const app1 = new Vue({
el: "#app1",
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
let child = {
template: `<div><h2>{{name}}</h2></div>`,
data(){
return {
name: "子组件"
}
}
};
let parent = {
// 注意下面的模板中子组件要写在模板中
template:`<div>
<h1>{{name}}</h1>
<child></child>
</div>`,
data(){
return {
name: "父组件"
}
},
components:{
child: child // 子组件注册在父组件中
}
};
const app = new Vue({
el: "#app",
components: {
parent: parent
}
})
</script>
</body>
</html>
关键点：父组件在自己模板中的子组件的标签中绑定一个属性，然后在子组件中使用props接收
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
let child = {
template: `<div>
<h2>{{name}}</h2>
<h3>父亲传过来的值：{{communication}}</h3>
</div>`,
data(){
return {
name: "子组件"
}
},
props: ["communication"]
};
let parent = {
template:`<div>
<h1>{{name}}</h1>
<child :communication="communication"></child>
</div>`,
data(){
return {
name: "父组件",
communication: "爸爸给儿子说的话"
}
},
components:{
child: child
}
};
const app = new Vue({
el: "#app",
components: {
parent: parent
}
})
</script>
</body>
</html>
关键点：子组件通过自己的,即this.$emit("事件名称"，数据)，提交一个事件；父组件在自己模板中的子组件标签中@"事件名称"="自己处理的事件"，来监听该事件，再用自己的方法处理事件以及数据；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="vue.js"></script>
<script>
let child = {
template: `<div>
<h2>{{name}}</h2>
<button @click="click_event">点我发消息</button>
</div>`,
data(){
return {
name: "子组件",
son_msg: "我给爸爸发的消息！"
}
},
methods: {
click_event: function () {
this.$emit("send_msg_event", this.son_msg)
}
}
};
let parent = {
template:`<div>
<h1>{{name}}</h1>
<child @send_msg_event="parent_method"></child>
<p>儿子发过来的消息：{{son_msg}}</p>
<p>{{num}}</p>
</div>`,
data(){
return {
name: "父组件",
num:"",
son_msg:""
}
},
components:{
child: child
},
methods:{
parent_method: function (data) {
this.num ++;
this.son_msg = data
}
}
};
const app = new Vue({
el: "#app",
components: {
parent: parent
}
})
</script>
</body>
</html>
关键点：使用中间人组为中介middle_Event = new Vue();提交事件使用middle_Event.$emit()，父组件使用middle_Event.$on()监听提交的事件，注意this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div>
<script src="vue.js"></script>
<script>
middle_Event = new Vue();
let com1 = {
template:`<div>
<h1>{{name}}</h1>
<button @click="click_com1">点我通信</button>
</div>`,
data(){
return {
name: "com1",
say_data: "com1说的话"
}
},
methods: {
click_com1: function () {
middle_Event.$emit("com1_say", this.say_data)
}
}
};
let com2 = {
template:`<div>
<h1>{{name}}</h1>
<p>com2中接收的com1发过来的值：<span :class="{active: is_show}">{{com1_send_msg}}</span></p>
</div>`,
data(){
return {
name: "com2",
com1_send_msg: "",
is_show : true
}
},
mounted(){
console.log(this); // 这个this是app这个Vue对象
let _this = this;
middle_Event.$on("com1_say", function (data) {
console.log(this); // 这个this是middle_Event这个Vue对象
_this.com1_send_msg = data
})
}
};
const app = new Vue({
el: "#app",
components: {
com1: com1,
com2: com2
}
})
</script>
</body>
</html>
重复功能和数据的储存器，自己的可以覆盖Mixins的内容。
不同组件的相同的部分提出去，使用mixins，优化我们的代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div>
<script src="vue.js"></script>
<script>
let same = {
data(){
return {
is_show: true
}
},
methods: {
show_or_hide: function () {
this.is_show = ! this.is_show
}
}
};
let com1 = {
template: `<div>
<p v-show="is_show">哈哈哈哈哈1</p>
<button @click="show_or_hide">点我显示隐藏1</button>
</div>`,
mixins: [same],
};
let com2 = {
template: `<div>
<p v-show="is_show">哈哈哈哈哈2</p>
<button @click="show_or_hide">点我显示隐藏2</button>
</div>`,
mixins: [same],
// 如果自己有，就用自己的，自己没有 就用mixins中的
data(){
return {
is_show: false
}
}
};
const app = new Vue({
el: "#app",
components: {
com1: com1,
com2: com2
}
})
</script>
</body>
</html>
插槽是一套内容分发的API，在组件中，<slot>作为内容承载分发的出口；
相似的的组件中不同之处的地方使用插槽自定义；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<com1><h2>asdasf</h2></com1>--> <!-- 插不了数据-->
<com1>
<div slot="my_slot">
<h3>使用插槽擦插入数据1</h3>
<h4>使用插槽擦插入数据1.1</h4>
</div>
</com1>
<com1>
<h3 slot="my_slot">使用插槽擦插入数据2</h3>
<h4 slot="my_slot">使用插槽擦插入数据2.1</h4>
<h4 slot="my_slot1">使用插槽1擦插入数据</h4>
</com1>
</div>
<script src="vue.js"></script>
<script>
let com1 = {
template: `<div>
<h2>原来的数据</h2>
<slot name="my_slot"></slot>
<slot name="my_slot1"></slot>
</div>`
};
const app = new Vue({
el: "#app",
components: {
com1: com1
}
})
</script>
</body>
</html>
标签：send event 接收 相同 自己 str 元素 rop rip
原文地址：https://www.cnblogs.com/glh-ty/p/9625539.html
