组件化

将页面中公共部分拿出来封装起来的操作

1. data 必须是函数

<template>
    <div class="home">
        <Nav></Nav>
        <Main></Main>
        <Foter></Foter>
    </div>
</template>
<script>
    import Nav from ‘../components/Nav‘
    import Foter from ‘../components/Foter‘
    import Main from ‘../components/Main‘

    export default {
        name: ‘Home‘,
        components: {
            Nav,
            Foter,
            Main
        },
        data() {
            return {
                movies: [
                    {
                        id: 1,
                        title: "西游记",
                        year: "1997"
                    }
                ]
            }
        }
    }
</script>
<style>
</style>

2. 父组件数据传递子组件(props)

从顶层组件将数据传递到子组件展示

父组件 Home.vue

<template>
    <div class="home">
        <Nav></Nav>
        <!-- 向子组件传递movies参数的值，如果不适用 v-bind 子组件变量名 就会被解析成传递的是字符串 -->
        <Main :movies="movies"></Main>
        <Foter></Foter>
    </div>
</template>


<script>
    import Nav from ‘../components/Nav‘
    import Foter from ‘../components/Foter‘
    import Main from ‘../components/Main‘
    export default {
        name: ‘Home‘,
        components: {
            Nav,
            Foter,
            Main
        },
        data() {
            return {
                movies: [
                    {
                        id: 1,
                        title: "西游记",
                        year: "1997"
                    }
                ]
            }
        }
    }
</script>
<style>
</style>

子组件 Main.vue

<template>
    <div>
        <p>{{movies.length}} Titles</p>
        <slot></slot>

        <ul class="movie-list">
            <li v-for="movie in movies" :key="movie.id">
                {{movie.title}} - {{movie.year}}
                 <span class="float-right">

                    <a class="imdb" :href="‘https://www.imdb.com/find?q=‘ + movie.title" target="_blank"
                        title="Find this movie on IMDb">IMDb</a>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: ‘Main‘,
    // movies 父组件在使用该组件时，需要使用 该 变量名= 的方式传递数据进来,(可以理解成将值赋值给movies这个变量)
    //props: [‘movies‘] // 数组写法
        //  对象写法，可以类型限制，设置默认值
    props: {
        // 对象或者数组是default 需要是个方法 
        movies: {
            type: Array,
            default() {
                return []
            }
        }
    }
}
</script>

<style>

</style>

3. 子组件数据传递给父组件(自定义事件)

从底层组件通过事件将必要条件传递给父组件，父组件对数据更新之后展示

子组件 Main.vue

<template>
    <div>
        <p>{{userInfo.length}} Titles</p>
        <slot></slot>

        <ul class="movie-list">
            <li v-for="movie in userInfo" :key="movie.id">
                {{movie.title}} - {{movie.year}}
                 <span class="float-right">

                    <a class="imdb" :href="‘https://www.imdb.com/find?q=‘ + movie.title" target="_blank"
                        title="Find this movie on IMDb">IMDb</a>
                    <button @click="btnClick(movie)">点击我将把内容传递给父组件</button>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: ‘Main‘,
    // props: [‘movies‘]    // 数组写法
    //  对象写法，可以类型限制，设置默认值
    props: {
        // 对象或者数组是default 需要是个方法 
        userInfo: {
            type: Array,
            default() {
                return []
            }
        }
    },
    methods: {
        btnClick: function (arg) {
            // console.log(arg)
            // 发射事件，给父组件, (事件名称, 参数)， 事件名称推荐始终使用 kebab-case 的事件名。
            this.$emit(‘item-click‘, arg)
        }
    }
}
</script>

<style>

</style>

父组件 Home.vue

<template>
    <div class="home">
        <Nav></Nav>
        <!-- item-click 为子组件发送过来的方法名  mainClick 为父组件监听该事件的方法-->
        <Main :userInfo="movies" @item-click="mainClick"></Main>
        <Foter></Foter>
    </div>
</template>


<script>
    import Nav from ‘../components/Nav‘
    import Foter from ‘../components/Foter‘
    import Main from ‘../components/Main‘

    export default {
        name: ‘Home‘,
        components: {
            Nav,
            Foter,
            Main
        },
        data() {
            return {
                movies: [
                    {
                        id: 1,
                        title: "西游记",
                        year: "1997"
                    }
                ]
            }
        },
        methods: {
            // 该方法的作用打印 子组件传递的内容
            mainClick: function (item) {
                console.log(item)
            }
        }
    }
</script>


<style>
   
</style>

源码地址

https://gitee.com/zy7y/hello-fast-api-vue

Vue：父子组件之间的通信

原文：https://www.cnblogs.com/zy7y/p/14493240.html