Vue组件及父子组件传值 

链接：http://www.qianxingweb.com 

1.组件简易总结：

组件总结：
1.若要传值与组件，则应用组件的Vue实例的data中需定义属性
2.组件中定义props接收传递过来的参数
3.组件中绑定参数的自定义指定为中横线写法，如v-bing:current-page
4.要想子组件传值给父组件，需要子组件中触发事件，通过事件想父组件传值，子组件传值给父组件方式为：methods中定义template要触发的事件，
在该方法中使用this.$emit(要出发的事件，要传递的数据)，并在父组件的方法中定义监听的事件方法

2.组件注意事项：

1、组件接收参数通过v-bing:xxx-xxx自定义指令接收，示例的:pages绑定对应于组件的props对应的属性pages
2、组件的指令只能是中横线写法，对应组件中的驼峰法属性或方法
3、以下示例供自己参考：传值给props：pages对应totalPages，current-page对应props的currentPage，current-change-event对应$emit的currentChangeEvent
4、子组件触发的this.$emit('abc',xxxx)中的abc对应父组件中组件监听的@abc="父组件的接收方法",abc可以是驼峰法也可以是中横线定义方式

3、简单的分页组件效果示例：

4、简单的分页组件写法：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            display: inline-block;
            margin: 1rem;
        }
    </style>
</head>
<body>
<div id="app" class="base">
    <!--组建的使用-->
    <el-page :pages="totalPages" :current-page="currentPage" @current-change-event="currentChange"></el-page>

</div>
<script src="assets/js/vue.js"></script>
<script>

    //注册全局分页组件
    Vue.component('el-page', {
        data(){
            return {
                current: this.currentPage,
                total: this.pages,
            }
        },
        watch:{
            pages(n){
                return this.total = n
            }
        },
        methods: {
            //前一页
            clickPrev(){
                if (this.current > 1) {
                    this.current--;
                }
            },
            //后一页
            clickNext(){
                if (this.current < this.total) {
                    this.current++;
                }
            },
            //当前页
            clickCurrent(i){
                this.current = i;
            },
            currentChangeEvent(){
                console.log("now page：",this.current);
                this.$emit("current-change-event",this.current);
            },
        },
        props: {
            //总数，接收父组件传递的值
            pages: {
                type: Number,
                default: 5
            },
            //当前页
            currentPage: {
                type: Number,
                default: 1
            },
        },
        //@click="currentChangeEvent" 点击div区域触发的时间
        template: `
            <div class="pagination" @click="currentChangeEvent">
                <li class="disabled" v-if="current==1" @click.prevent="clickPrev"><span>«</span></li>
                <li v-else @click.prevent="clickPrev"><a href="javascript:void(0);">«</a></li>
                <li v-for="i in total" :class="current==i ? 'active' : ''">
                    <template v-if="current==i">
                        <span>{{i}}</span>
                    </template>
                    <template v-else>
                        <a href="javascript:void(0);" @click.prevent="clickCurrent(i)">{{i}}</a>
                    </template>
                </li>
                 <li class="disabled" v-if="current==total" @click.prevent="clickNext"><span>»</span></li>
                <li v-else @click.prevent="clickNext"><a href="javascript:void(0);">»</a></li>
             </div>
        `
    });

    var pageVue = new Vue({
        el:"#app",
        data:{
            //总页数，组件要接收的数据
            totalPages:10,
            //当前页，组件要接收的数据
            currentPage:2,
        },
        methods:{
            //父组件监听子组件触发的时间，达到子组件传值父组件的目的
            currentChange(current){
                console.log('当前页',current);
                this.currentPage = current;
            }
        }
    });
</script>
</body>
</html>

 

链接：http://www.qianxingweb.com 
posted @ 2019-07-25 10:17  画语清尘  阅读(333)  评论(0)    收藏  举报