Vue开发之父子组件

创建父子组建，分三步。一是创建文件，二是引入组建，三是组件间通信。在components目录下新建sub文件夹，用于存放一下可以复用的子组件。比如新建一个SubCon.vue组件

<template><div class="first-app">{{ msg }}<button @click="getButtonClick">{{ text || '确认' }}</button></div>
</template>
<script>
export default {name: 'Confirm',props: ['text'],data () {return {msg: 'sub compontsppp'}},methods: {getButtonClick () {this.$emit('message', this.msg)}}
}
</script>
<style scoped>
</style>

父组件的代码如下：

<template><div class="hello"><h1>{{ msg }}</h1>test<h2>Essential Links</h2><Confirm text="注册" @message="getMessage"></Confirm></div>
</template>
<script>
import Confirm from './Sub/Confirm'export default {name: 'First',components: {Confirm},data () {return {msg: 'Welcome tssso Your Vue.js App111111111'}},methods: {getMessage (val) {alert(val)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>h1, h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
</style>

即可创建父子组建，并实现了组建间的通信问题

创建新的组件，在index.js中别忘了添加引入：

import Second from '@/components/Second'