1.作用域插槽实现element table展示：
App.vue：
<template>
<div id="app">
<h1>App</h1>
<demo-two :list="list">
<!-- 通过作用域插槽得到子组件传过来的 数据 数据再scope对象中 -->
<!-- 通过scope.row 把传过来的数据拿出来 -->
<template slot-scope="scope">
<a @click="handler(scope.row)" href="javascript:;">查看</a>
</template>
</demo-two>
</div>
</template>
<script>
import DemoTwo from '@/components/DemoTwo.vue'
export default {
name:"App",
components: { DemoTwo },
data(){
return{
list:[
{name:'zhangsan',age:'30'},
{name:'lisi',age:'40'},
{name:'wangwu',age:'50'},
]
}
},
methods:{
handler(row){
console.log(row);
}
}
}
</script>
<style>
</style>
components文件下：
DemoTwo.vue:
<template>
<div>
<ul>
<li v-for="(v,i) in list" :key="i">
{{v.name}}--{{v.age}}
<!-- 把数据中的v给到属性row通过作用域插槽传给父元素使用 -->
<slot :row="v"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"DemoTwo",
props:['list']
}
</script>
<style>
</style>
效果：
2.vuex数据共享：
App.vue文件：
<template>
<div id="app">
<!-- <h1>{{$store.state.msg}}</h1> -->
<h1>{{$store.state.num}}</h1>
<button @click="add">+1</button> |
<button @click="del">-1</button>
<comp-a></comp-a>
<comp-b></comp-b>
</div>
</template>
<script>
import CompA from '@/components/CompA.vue'
import CompB from '@/components/CompB.vue'
export default {
name:"App",
components:{
CompA,
CompB
},
methods:{
/* 通过vuex方法实现了不同组件之间的数据共享 */
add(){
this.$store.commit('ADDNUM')
},
del(){
this.$store.commit('DELNUM')
}
}
/* created(){
console.log(this.$store.state.msg);
} */
}
</script>
<style>
</style>
store下index.js文件：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 */
/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 */
/* 导出一个Vuex实例化对象 */
export default new Vuex.Store({
/* state是用来存储组件中的数据的 */
state: {
msg:'我是组件共享的数据',
num:0
},
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
getters: {
},
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations: {
/* mutations 的方法最好大写,为了和actions方法做区分 */
ADDNUM:function(state){
console.log('ADDNUM',state);
state.num++
},
DELNUM:function(state){
console.log('DELDNUM',state);
state.num--
},
},
/* actions是用来调后台接口的并commit提交一个mutations */
actions: {
/* actions里面的方法小写为了区分mutations里面的方法 */
},
/* 可以使用modules把vuex分模块 */
modules: {
}
})
components下
CompA.vue文件：
<template>
<div>
<h1>CompA-----{{$store.state.num}}</h1>
</div>
</template>
<script>
export default {
name:'CompA'
}
</script>
<style>
</style>
CompB.vue文件：
<template>
<div>
<h1>CompB------{{$store.state.num}}</h1>
</div>
</template>
<script>
export default {
name:'CompB'
}
</script>
<style>
</style>
效果：
