前端vue框架常用难点

一、父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的

解决办法：在子组件data中定义一个父组件传递过来的副本,再把该副本利用this.$emit("","")给传回去，父组件利用自定义事件接受该值

<template>
	<!-- pagination -->
	<div class="pagination-container" v-show="total/10 > 1 ">共 {{ total }}条
        <el-pagination background @current-change="dealChange" :current-page.sync="currPage" layout="prev,pager,next" :page-size="16" :total="total">
		</el-pagination>
	</div>
</template>
<script>
export default {
	name: 'pagination',
	props:[ 'total', 'page'],
    data(){
		return {
			currPage: this.page;
        }
    },
    methods:{
//父子组件的双向数据绑定,所以在子组件是不允许修改父组件的属性的，控制台会报如下错误:
//[Vue warn]:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
// Instead，use a data or computed property based on the prop's value.Prop being mutated:"page"
//解决办法
//在子组件data中定义一个父组件传递过来的副本,再把该副本利用this.$emit("","")给传回去，父组件利用自定义事件接受该值
        dealchange(){
            //this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递参数
            this.$emit("change", this.currPage);
        }
    }
}
</script>

在父组件中子组件引用处添加函数：

// v-on:function="function1"； 
// 其中function为子组件中定义函数（change），function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称
//	v-on：可用@代替 @function="function1" ，@为v-on:的简写
<pagination ref="pagination"  @change="handleClose"/>
// val及为子组件中currPage，即接收的子组件参数
// 子组件抛出值 this.$emit('input', val) ,input方法，父组件接收可以用v-model="val" 
<script>
    handleClose(val){
    	this.currPage = val;
    },
</script>

v-model用法

<div id="app">
    <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男</label>
    <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女</label>
    <h2> 您选择的性别是:{{sex}} </h2>
</div>
<script src="../js/vue.js "></script>
<script>
    const app = new Vue({el: '#app ',
        data: {
            message:'你好啊',
            sex:'男',
        }
    })
</script>

二、props 的 数组／对象的默认值应当由一个工厂函数返回

props: {
	activeTab: {
        type:Number,
        default: 0,
    },
    data: {
        type: Array,
        default: ()=>[],
    }
    obj: {
        type: object,
        default: () => { msg: "hello"},
    }
}

三、嵌套路由（子路由)

使用vue-router的步骤:

第一步:创建路由组件

/* index.js */
//配置路由相关的信息
import VueRouter from 'vue-router' 
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components /About'

// 1.导入路由对象，并且调用Vue.use(VueRouter)
Vue.use(VueRouter)
// 2.创建VueRouter对象
const routes = [
    {
        path: '/home',
    	component: Home,
    },
	{
		path: '/about',
        component: About,
    }
]
const router = new VueRouter({//配置路由和组件之间的应用关系
    routes,
})

第二步:配置路由映射:组件和路径映射关系

第三步:使用路由:通过和

<template>
<!-- <router-link>:该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签.
<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.
网页的其他内容，比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级.
在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变.-->
	<div id="app">
     	<router-link to="/home">首页</router-link>
      	<router-link to="/about">关于</router-link>
      	<router-view></router-view>
   	</div>
</template>
<script>
export default {
    name: 'App'
}
</script>
<style></style>