[TOC] ## 创建组件 `/src/components/HelloWorld.vue` ``` <template> <div class="hello"> <h2>{{msg}}</h2> </div> </template> <script> export default { name: 'HelloWorld', //name 可以不写 data () { return { msg: 'Welcome to Your Vue.js App' } } } ``` ## 引入组件 `src/App.vue` ``` <template> <div id="app"> <hello></hello> //引入到模板 </div> </template> <script> import hello from './components/HelloWorld'; export default { data() { return { tiems: [] } }, components:{hello,} //引 } </script> ``` ## 父组件向子组件通讯 `src/App.vue` ``` <hello msgProps="msg by props"></hello> ``` `/src/components/HelloWorld.vue` ``` export default { props: ['msgProps'], mounted(){ console.log(this.msgProps); } } ``` ## 父组件像子组件传值 父组件传值 ``` <v-header :seller="seller"></v-header> export default { data () { return { seller: {} } }, } ``` 子组件接收 ``` ``` ## 子组件向父组件通讯 在子组件中 ``` <button v-on:click="godFather">click!!!</button> //js godFather:function () { this.$emit('clickByFather',"这是传给父组件的信息); }, }, ``` 父组件 ``` <HelloWorld v-on:clickByFather="msgFromChild"></HelloWorld> //js methods: { msgFromChild:function (msg) { console.log(msg); } }, ```