- Welcome to Journal web site.
- 开发无止境 -
Data: 2016-09-11 20:57:12Form: JournalClick: 8
<!-- `App.vue` 文件中，引入组件 -->
<template>
<div>欧阳克</div>
<!-- 4、使用组件里的html代码，这里的标签名 跟 key 对应上 -->
<!-- 5、一般组件会起驼峰命名，比如：OneCom，TwoCom。 -->
<!-- 5.1、引入的后，标签可以使用2种方式： -->
<OneCom></OneCom>
<one-com></one-com>
</template>
<script>
// 1、导入组件
import OneCom from './components/OneCom';
export default {
// 2、组件加入，也是使用组件
components:{
// 3、key键随便起，value值就是上面引入的名字
OneCom : OneCom,
// 如果key和value名字一样，可以写一个
// OneCom
}
};
</script>
<!-- 创建 /components/OneCom.vue 文件 -->
<template>
<div>OneCom组件文件</div>
</template>
<script>
export default {
name : "OneCom"
};
</script>
<!-- 组件使用子组件 -->
<template>
<div>OneCom组件文件</div>
<!-- 3、使用TwoCom标签 -->
<two-com></two-com>
</template>
<script>
// 1、引入 TwoCom 文件，2个子组件在同一个目录
import TwoCom from './TwoCom';
export default {
name : "OneCom",
// 2、使用 TwoCom 组件
components:{
TwoCom
}
};
</script>
<!-- 创建 /components/TwoCom.vue 文件 -->
<template>
<div>TwoCom组件文件</div>
</template>
<script>
export default {
name : "TwoCom"
};
</script>
<!-- 文件引入多个组件 -->
<template>
<div>
<div>欧阳克</div>
<one-com></one-com>
<two-com></two-com>
</div>
</template>
<script>
import OneCom from "./components/OneCom.vue";
import TwoCom from "./components/TwoCom.vue";
export default {
components: {
OneCom,
TwoCom
}
};
</script>
<!-- /components/OneCom.vue 文件 -->
<template>
<div>OneCom组件文件</div>
</template>
<script>
export default {
name : "OneCom"
};
</script>
<!-- /components/TwoCom.vue 文件 -->
<template>
<div>TwoCom组件文件</div>
</template>
<script>
export default {
name : "TwoCom"
};
</script>
<template>
<div>欧阳克</div>
<!-- 普通传值，key和value -->
<one-com title="php中文网"></one-com>
<!-- 绑定变量传值 -->
<one-com :title="title" :msg="msg" :arr="arr" :ob="ob"></one-com>
</template>
<script>
import OneCom from "./components/OneCom.vue";
export default {
name: "Phpcn",
data() {
return {
title: "使用变量的方式传值",
msg: "消息",
arr : [
'欧阳克',
'朱天蓬',
'灭绝师太'
],
ob: {
name: "欧阳克",
age: "38岁"
}
};
},
components:{
OneCom : OneCom
}
};
</script>
<!-- components/OneCom.vue 子文件 -->
<template>
<div>
<div>{{ title }}</div>
<div>{{ msg }}</div>
<div>{{ arr }}</div>
<div>{{ ob }}</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
};
},
// 1、props 参数，获取父文件的传值
props: ["title", "msg", "arr", "ob"]
};
</script>
<template>
<div>
<one-com :title="title" :msg="msg" :arr="arr" :ob="ob"></one-com>
</div>
</template>
<script>
import OneCom from "./components/OneCom.vue";
export default {
components: {
OneCom,
},
data() {
return {
title: "使用变量的方式传值",
msg: "消息",
arr : [
'欧阳克',
'朱天蓬',
'灭绝师太'
],
ob: {
name: "欧阳克",
age: "38岁"
}
};
},
};
</script>
<!-- components/OneCom.vue 子文件 -->
<!-- 1、接收还可以限制参数 -->
<!-- 2、type 接收数据，类型：String，Array， -->
<!-- 3、default 父文件没有传值，自己会给个默认值 -->
<!-- 4、required 等于true，就是必传的值 -->
<template>
<div>
<div>{{ title }}</div>
<div>{{ msg }}</div>
<div>{{ arr }}</div>
<div>{{ ob }}</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
// 数组和对象，要用方法返回。没有语法检查，就可以直接写对应的格式
props: {
title: {
type: String,
default: function () {
return "php中文网";
},
required : true
},
msg: {
type: String,
default: "默认msg",
},
arr: {
type: Array,
default: function () {
return ["欧阳克","朱天蓬"];
}
},
ob: {
type: Object,
default: function () {
return { name: "朱天蓬", age: "48岁" };
}
}
}
};
</script>
# 2、子传父，事件传值 (2个子组件，tabBar 点击tabBar，另一个子组件里的数据要改变，就要经过父组件)
// App.vue文件
<template>
<div>{{teacher}}</div>
<one-com @app_edit="app_edit"></one-com>
</template>
<script>
import OneCom from './components/OneCom';
export default {
data() {
return {
teacher : "欧阳克"
};
},
components: {
OneCom,
},
methods : {
app_edit(e){
console.log('我是父文件的app_edit方法');
this.teacher = e;
}
}
};
</script>
// components/OneCom.vue 子文件
// 使用 $emit 方法，调用父文件的方法(https://v3.cn.vuejs.org/api/instance-methods.html#emit)
// 所有子传父，都是通过事件传过去的
<template>
<div>
<button @click="edit('朱天蓬')">传给父文件</button>
<button @click="edit('灭绝师太')">传给父文件</button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods : {
edit(teacher){
