20200715——vue单文本组件拆分

1.重构 vue单文本组件页面

• 参考文章单文本组件传值：https://blog.csdn.net/weixin_43873005/article/details/89918285
• 拆分的过程出现报错：

  [vue/valid-template-root]

  The template root disallows 'v-for' directives.eslint-plugin-vue

• 报错原因：不能在vue根组件中使用 v-for，因为根组件只能有一个

Home.vue（作为父组件）：开发/生产切换按钮，列表容器

<template><div class="home-wrap"><button class="change" @click="change" v-if="ifShow && ifDev">开发环境</button><button class="change" @click="change" v-if="ifShow && !ifDev">生产环境</button><div class="cate"><div class="cate-wrap" v-for="(cate, index) in data" :key="index">// 这里引入子组件标签 通过 绑定属性cate 向子组件传递 home组件的值<CateTitle :cate="cate" /><CateList :cate="cate" /></div></div></div>
</template>

• home.vue 用 cate向子组件传值

<script>
// 导入组件
import { devData, prodData } from '../config/data'
import CateTitle from './CateTitle'
import CateList from './CateList'export default {// 声明导出名name: 'Home', data () {return {data: [],ifShow: false,ifDev: false}},components: {// 父组件注册需要用到的子组件CateTitle,CateList,},
...
<style scoped lang="less"> 
// 样式应该加作用域

CateTitle.vue：存放标题（作为子组件）

CateList.vue：存放链接列表（作为子组件）

<template>// 使用父组件传来的值<p class="cate-title">{{cate.cateTitle}}</p>
</template><script>
export default {// 声明自己的导出组件名name: 'CateTitle',// 接受 父组件home.vue 传来的值props: ['cate'],
}
</script><style scoped lang="less">

• props 接受父组件的值

 

2.单文本组件之间互相传值（并未实践）

• 在 main.js 中添加 vue实例，注意 data中有事件中心，兄弟传值

new Vue({el: '#app',router,components: { App },template: '<App/>',data: {// 兄弟组件传值 事件中心bus: new Vue()}
})

emit_test.vue

<template><div>// input 双向绑定 message<input type="text" v-model="message">// 点击 change按钮 执行 send方法<button @click="send">点我进行传值</button><br></div>
</template>export default {name: 'Emit',data: function (){return {message: '' // 双向绑定}},methods: {send () {// this.$root：找到根实例，然后用 bus.$emit 向另一个组件发送数据 this messagethis.$root.bus.$emit('change',this.message)},...

• this.$root.bus.$emit('change',this.message)：this.$root 找到根实例
• 然后用 bus.$emit 向另一组件发送数据，this.message 要发送出去的数据

receive_test.vue

<template><div class="bigBox"><button @click='reset'>点我传送数值</button><div ref='toMove' class='block' :style="position"></div></div></template>
export default {name: 'Rec',data(){return {position:{'top': '20px','left': '150px'}}},/* 用 $on 接收另一个子组件传来的数据 */created(){let that = this;// 接受另一个子组件传来的值 $on，注意change 是在上一个 methods中定义的this.$root.bus.$on('change', t => {switch (t){case 'right':that.moveRight();break; ...},methods:{moveRight(){...},reset(){this.$router.go('/');}}
}

• this.$root.bus.$on(‘change’, funcName(t){
• funcName里面的 t 就是传过来的 this.message