组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 js 特性扩展
目录
1.父组件向子组件传值,
2.子组件向父组件传值,
3.兄弟组件之间的值传递。
父组件向子组件传值
父组件发送的形式是以属性的形式绑定值到子组件身上。
<div id="app"> <div>{{pmsg}}</div> <!-- 给子组件传入一个静态的值 --> <div :title='来自父组件的值'></div> <div :ptitle='ptitle'></div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', ptitle: '动态绑定属性' } }); </script>
子组件通过" props"来接受父组件传来的值
Vue.component('menu-item', { // 3、 子组件用属性props接收父组件传递过来的数据 props: ['title', 'ptitle'], data: function() { return { msg: '子组件本身的数据' } }, template: '<div>{{msg + "----" + title + "-----" + ptitle}}</div>' });
单项数据流:父组件传递给子组件的数据,子组件不能修改
注意 :1.父组件上自定义属性前面要是不加v-bind 会以字符串的形式传值给子组件,要是加v-bind会以js代码的格式解析后面的值
2.props中的属性如何使用和data上的数据访问规则是一样的(模板中访问 直接写名字,methods或者生命周期函数或者计算属性等访问 通过 this.名字)
子组件向父组件传递
在父组件中,给子组件标签绑定,自定义事件,自定义事件的事件执行函数 指向父组件methods 上的某个方法;
在子组件中去触发 绑定在自己身上的自定义事件(点击事件:生命周期等等)
当自定义事件被触发,就会执行事件执行函数 也就是父组件 methods上的某个函数(该函数定义形参 用于接收子组件$emit 传递过来的参数 也就是子组件的数据)
<div id="app"> <div>{{pmsg}}</div> //给子组件上绑定自定义事件 <son @my_data='handle'></son> //展示子组件传递过来的值 {{ ptitle }} </div> <script type="text/javascript"> Vue.component('menu-item', { data: function() { return { msg: '子组件本身的数据' } }, // 子组件中绑定自定义事件,当我点击这个事件触发对应的事件执行函数 template: '<div @click='clickhandle'></div>', methods:{ clickhandle(){ // 当自定义事件被触发时,就会触发事件函数也就是父组件methods上的某个函数 //通过 $emit 向外"my_data"传递一个或者多个参数 父组件自定义事件就能接受传递过来的参数 this.$emit('my_data',this.msg) } } }); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', ptitle: '' }, methods:{ //val 就是子组件传递过来的参数 handle(val){ this.ptitle= val } } }); </script>
兄弟组件之间的值传递
兄弟之间传递数据需要借助于事件中心来传递数据
//事件中心 let hub = new Vue
事件中心提供三个方法:
1.hub.$on ---添加事件监听
2.hub.$emit --触发自定义事件
3.hub.$off ---移除事件监听
通过事件中心去给每个兄弟组件分别添加各自的事件监听
在每个兄弟组件身上 通过条件 触发 对方的事件 实现值的传递
<div id="app"> <button @click='handle>销毁事件监听</button> <span> <my_son1></my_son1> </span> <span> <my_son2></my_son2> </span> </div> <template id='temp1'> <div> <h4>a组件</h4> <button @click='clickhandle'>向b传值</button> <h3> 接受到的值: {{pmgs}} </h3> </div> </template> <template id='temp2'> <div> <h4>a组件</h4> <button @click='clickhandle'>向b传值</button> <h3>接受到的值:{{pmgs}}</h3> </div> </template> <script src="./js/vue.js"></script> <script> // 事件中心 let hub = new Vue() var son1 = { mounted() { //利用 hub.$on来监听兄弟触发a_event自定义事件 ,val 接受兄弟事件传过来的数据 //注意这里的 用的是箭头函数 因为需要用到this hub.$on('a_event', (val) => { this.pmgs = val }) }, data() { return { msgA: 'a组件里面的值', pmgs: '' } }, template: '#temp1', methods: { clickhandle() { //用 hub.$emit来触发自定义事件 b_event ,第二个参数就是向兄弟组件传入的数据 hub.$emit('b_event', this.msgA) } } } Vue.component('my_son1', son1) var son2 = { mounted() { hhb.$on('b_event', (val) => { this.pmgs = val }) }, data() { return { msgB: 'b组件里面的值', pmgs: '' } }, template: '#temp2', methods: { clickhandle() { hhb.$emit('a_event', this.msgB) } } } Vue.component('my_son2', son2) var vm = new Vue({ el: '#app', data: {}, methods: { handle: function(){ //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据 hub.$off('tom-event'); hub.$off('jerry-event'); } } }) </script>
头一次书写,各位大佬多多提提意见 谢谢!!!