组件对于vue来讲很是重要,学习学习了基础vue后,再回过头来把组件弄透!css
组件意味着协同工做,一般父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B 。html
它们之间必然须要相互通讯:父组件要给子组件传递数据,子组件须要将它内部发生的事情告知给父组件。vue
在 Vue.js 中,父子组件的关系能够总结为 props down, events up 。java
父组件经过 props 向下传递数据给子组件,子组件经过 events 给父组件发送消息。api
看看它们是怎么工做的。app
组件实例的做用域是孤立的。这意味着不能(也不该该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,咱们须要经过子组件的props选项。学习
子组件要显式地用 props
选项声明它期待得到的数据:this
js: spa
Vue.component('child', { / 声明 props props: ['message'], // 就像 data 同样,prop 能够用在模板内 // 一样也能够在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' })
<child message="hello!"></child>
这个是vue官网上给的方法调用,咱们看看页面上怎么使用。3d
子组件 main_Header.vue
<template> <div> <div>{{count}}</div> <div v-for="(item, index) in list">{{item}}</div> <button v-on:click="sendMsg">向父组件传参</button> <!-- 这里用简单的绑定方法触发传参--> </div> </template> <script> export default { name: 'main_header', props: ['count', 'list'], methods: { sendMsg: function () { //传参方法 this.$emit('headCallBack', '子组件的参数内容'); //第一个参数是父组件中v-on绑定的自定义回调方法,第二个参数为传递的参数 } } }; </script> <style> </style>
父组件 App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <div>子组件传过来的内容:{{msg}}</div> <mainHeader :count="count" :list="list" v-on:headCallBack="headCall"></mainHeader> <!--经过v-on绑定方法,headCallBack为子组件中$emit()中第一个参数,headCall为回调方法,参数就传入这个方法中,看下面的方法--> <router-view/> </div> </template> <script> import mainHead from './components/header/main_header'; var data = { list: ['java', 'html', 'css', 'js'] }; export default { name: 'app', data: function () { return { count: 0, list: data.list, msg: '' }; }, components: { mainHeader: mainHead }, methods: { addCount: function () { let _this = this; setInterval(function () { _this.count++; }, 1000); }, headCall: function (msg) { //回调方法,接收子组件传的参数 this.msg = msg; } }, mounted: function () { this.$nextTick(function () { this.addCount(); }); } }; </script>
效果: