1.先在main.js中配置要使用的全局vue文件:如图
2.配置全局注册或本地注册
3.父传子
- 子传父 (1)第一种方式
子传父(2)第2种方式
项目结构:
完整版代码:
1.main.js页面:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Home from './components/Home'
import Content from './components/Content'
Vue.config.productionTip = false
Vue.component("homeapp",Home)
Vue.component("contentapp",Content)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2.App.vue页面:
<template>
<div id="app">
{{name}}
<homeapp :myName="name" :xiaohe="name1"></homeapp>
<homeapp @newName="name=$event"></homeapp>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
name:"0000200"
}
},
methods:{
name1:function (name) {
this.name=name;
}
}
}
</script>
3.Home.vue页面:
<template>
<div>
{{title}}<br>
<input type="button" @click="dianwo" value="发发发">
{{myName}}
</div>
</template>
<script>
import Content from './Content'
export default {
//本地注册
comments:{
//标签名 组件名
"contentapp":Content
},
name: "Home",
data(){
return{
title :"Hello Vue1111"
}
},
methods:{
dianwo:function () {
this.$emit("newName","很符合")
this.xiaohe("xiaohe")
}
},
props:{
myName:{
type:String,
required:true,
default:"默认值"
},
xiaohe:{
type: Function
}
}
}
</script>
<style scoped>
</style>
4.Content.vue页面:
<template>
<div>
{{age}}
</div>
</template>
<script>
export default {
name: "Content",
data(){
return {
age:16
}
}
}
</script>
<style scoped>
</style>