一、父传子：使用props传递数据
- 在子组件构建的自定义元素中添加属性：
<Pagination :totalpage="totalPage" @sendPage="renderList"></Pagination> - 在子组件中通过props接收数据
export default {
name: 'Pagination',
props: ['totalpage',],
}
二、子传父
- 使用自定义事件
(1)在子组件构建的自定义元素中添加自定义事件：
<Pagination :totalpage="totalPage" @sendPage="renderList"></Pagination>
(2)在子组件中触发自定义事件，将数据以参数的形式发送
this.$emit('sendPage',this.currentPage);
(3)父组件通过执行自定义事件绑定的函数接受参数
renderList(value) {
this.page = value;
this.getData();
}
- 使用v-model
(1)在子组件构建的自定义元素中通过v-model绑定动态属性(默认为value属性)：
<btn-compnent v-model="total"></btn-compnent>
(2)在子组件中触发input事件，将数据以参数的形式发送
this.$emit('input',this.count);
(3)父组件中第①步绑定的动态属性的值会自动更新
<p>您好,您现在的银行余额是{{total}}元</p>
(4)vmodel 其实是一个语法糖，这背后其实做了两个操作
- v-bind 绑定一个 value 属性
- v-on 指令给当前元素绑定 input 事件
三、非父子组件之间的通信
- 在根vue实例中创建一个bus变量，值为空的vue实例
var app = new Vue({
el: '#demo',
data() {
return {
bus: new Vue({}),
};
},
})
- 在A组件中通过根组件中的bus触发事件发送数据
this.$root.bus.$emit('transfer',this.message) - 在B组件中通过根组件中的bus监听事件接收数据
this.$root.bus.$on('transfer',function(value){
alert(value);
});
四、父链与子链
- 子组件通过父链获取、修改父组件的数据：this.$parent
Vue.component('child-component',{
template:'<button @click="setFatherData">通过点击我修改父亲的数据</button>',
methods:{
setFatherData:function () {
this.$parent.msg = '数据已经修改了'
}
},
})
- 父组件通过子链获取、修改子组件的数据：this.$children
- 子链索引：this.$refs，为子组件提供了索引的方法，在子组件中添加特殊属性ref后即可使用。
<div id="demo">
<a-component ref="a"></a-component>
</div>
var app = new Vue({
el: '#demo',
methods: {
setA: function(){
this.$refs.a.message = '子组件A中的内容被父组件修改了';
},
});
五、slot(插槽)
- slot(插槽)简介：
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板，这个过程被称为内容分发。Vue.js 实现了一个内容分发 API，使用特殊的 ‘slot’ 元素作为原始内容的插槽。 - slot(插槽)的使用：
(1)单个插槽
<div id="app" >
<my-component>
<p>我是父组件的内容</p>
</my-component>
</div>
Vue.component('my-component',{
template:`<div>
<slot>如果父组件没有插入内容，我就作为默认出现</slot>
</div>`
})
(2)具名插槽
<name-component>
<h3 slot="header">我是标题</h3>
<p>我是正文内容</p>
<p>正文内容有两段</p>
<p slot="footer">我是底部信息</p>
</name-component>
Vue.component('name-component',{
template:`<div>
<div class="header"><slot name="header"></slot></div>
<div class="contatiner"><slot></slot></div>
<div class="footer"><slot name="footer"></slot></div>
</div>`
})
- 作用域插槽
作用域插槽是一种特殊的slot，使用一个可以复用的模板来替换已经渲染的元素，通过它可以从子组件获取数据。
<my-component>
<template slot="abc" slot-scrop="prop"> //旧方法，注意：template模板是不会被渲染的
<p>{{prop.text}}</p>
</template>
<p slot="abc" slot-scrop="prop">{{prop.text}}</p> //新方法
</my-component>
Vue.component('my-component',{
template:`<div>
<slot text="我是来自子组件的数据" name="abc"></slot>
</div>`
})
- 访问插槽：通过this.$slots.(name)
<name-component>
<h3 slot="header">我是标题</h3>
<p>我是正文内容</p>
<p>正文内容有两段</p>
<p slot="footer">我是底部信息</p>
</name-component>
Vue.component('name-component',{
template:`<div>
<div class="contatiner"><slot></slot></div>
<div class="footer"><slot name="footer"></slot></div>
</div>`,
mounted:function () {
var header = this.$slots.header; //访问插槽
var text = header[0].elm.innerText;
console.log(header);
console.log(text);
},
})
