父组件为view问价夹中的FatherDom.vue
子与孙组件是components中的ChildrenDom和ChildrenDomChild,
父子之间的通讯通过props和$emit来进行简单的的通讯,但是中间若是加上一个组件就不能完美实现通讯。所以需要使用$attrs&$listeners,在子组件中充当中转作用。
父传孙
父组件动态绑定传递的数据传递给子组件,子组件通过props接受数据,可以直接在子组件页面上渲染,若是值渲染一个内容还有数据没有渲染,为渲染的数据就会直接在标签内出现,不会影响页面的内容,这是默认的内容。
但是可以使用inheritAttrs:false(和data同级)阻止默认没有被执行的数据。而这些没有被执行的数据就会被存放在$attrs中如:attrs:{ "coo": "hello world2" }。所以孙组件可以接着使用attrs来接受未执行的数据。就像子组件接受父组件的内容一样。
孙传父
和父孙通讯以及父子通讯方法类似,在孙组件中设置点击事件,在讲事件指派一个方法给子组件,子组件讲使用v-on="$listeners"来中专这个方法。最后直接还是父组件接受改方法。并在methods中再次创建一个方法。即可点击孙组件内容实现父组件内容的实现。
父组件
<template>
<div>
我是父组件fatherdom
<ChildrenDom :foo="foo" :coo="coo" @startRocket="rocket"></ChildrenDom>
</div>
</template>
<script>
import ChildrenDom from '../components/ChildrenDom.vue'
export default {
name:'FatherDom',
components:{
ChildrenDom
},
data(){
return{
foo:'hello world',
coo:'hello world2'
}
},
methods:{
rocket(){
console.log("火箭升天成功")
}
}
}
</script>
<style>
</style>
子组件
<template>
<div>
<p>foo:{{foo}}</p>
<!-- <p>attrs:{{$attrs}}</p> -->
<!-- attrs:{ "coo": "hello world2" }上一行渲染的内容 -->
<ChildrenDomChild v-bind="$attrs" v-on="$listeners"></ChildrenDomChild>
<!-- v-bind="$attrs"为中专向传递孙组件 -->
</div>
</template>
<script>
import ChildrenDomChild from './ChildrenDomChild.vue'
export default {
name:'ChildrenDom',
props:['foo'],
inheritAttrs:false,//阻止没有被执行的数据了
components:{
ChildrenDomChild
}
}
</script>
<style>
</style>
孙组件
<template>
<div>
<p>coo:{{coo}}</p>
<button @click="RocketStart">我要发射火箭</button>
</div>
</template>
<script>
export default {
name:'ChildrenDomChild',
props:['coo'],
methods:{
RocketStart(){
this.$emit("startRocket")
console.log('Rocketstart')
}
}
}
</script>
<style>
</style>
provide(提供)和inject(依赖注入)组件通讯
不是响应式,组件中的六种通讯方式之一
第一种props和$emit,2.$refs 3.children和parent
4.vuex,5、attrs和listeners,6、provide和inject
provide是将组件的所有内容都传递出去
provide(){
return{
app:this
}
},
现在的app就是this,指的是App.vue整个的实例对象。
子组件桐过依赖注入,inject接受app即可调用app页面中的所有方法数据等。
父组件部分
<template>
<div id="app">
<div>
<nav>
<router-link to="/" tag="h2">HomeView</router-link>|
<router-link to="/aboutview" tag="h2" @click="changeapp()">AboutView</router-link>
<router-link to="/fatherdom" tag="h2">fatherdom</router-link>
</nav>
</div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'App',
data(){
return{
count:1,
userid:123
}
},
provide(){
return{
app:this
}
},
methods:{
changeapp(){
this.count++
console.log('changeapp12234')
}
}
}
</script>
子组件
<template>
<div>
<h2 @click="about">about</h2>
count--{{num}}
</div>
</template>
<script>
export default {
name:'AboutView',
inject:['app'],
methods:{
about(){
console.log(this.app.userid)
this.app.changeapp()
// console.log()
}
},
computed:{
num(){
return this.app.count
}
}
}
</script>
<style>
</style>
vuex
安装使用vue ui命令执行,打开网页点击导入项目后,使用【插件】安装vuex。
安装完成后会有store文件夹
index.js文件中vuex共有五种状态state、getters、mutations、actions、modules。
Vuex是专门为vue.js应用程序开发的状态管理模式。
state专门用来存放数据的
mutations用于改变state中存放的数据的,相当于页面中的methods,同步的方法
getters用于计算过滤数据,相当于页面中的computed
action相当于页面中的methods,异步方法,请求数据,一般情况不会通过actions来改变state中的数据,也不能改变,可以通过上下文环境来操作context来操作mutations和getters以及state
modules主要是当store中内容较多时进行分模块的
注意的是main.js中需要引入store文件并在实例中挂载。
注:vuex有4个辅助函数专门用来操作state数据mapState、mapMutations、mapGetters、mapActions。
第一种调用state的方法
<h2>{{$store.state.count}}</h2>
在script中的mounted打印this可以看出页面中有store内容
可以直接写上述代码获取state的内容。
第二种
使用辅助函数,在计算属性中使用...mapState(['count']),mapState会将所有的传递来的数据都接受,在括号内使用数组写,接受内容。
可以直接调用[]号内的内容,也就是state中的数据。
第三种
对象...mapState({ a:'count'})
方法三,注意count要加上引号,若a命名为count不能使用同名省略的方法,因为有引号