2.2 父子组件

最新推荐文章于 2024-01-02 15:35:39 发布

飞翔荷兰号

最新推荐文章于 2024-01-02 15:35:39 发布

阅读量165

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43374578/article/details/108880880

版权

一、父子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="first">
    <father_component></father_component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 1. 子组件
    let childConstructor = Vue.extend({
        template: `
            <div>
               <h2>我是子组件</h2>
            </div>`,
    })

    // 2. 父组件： 将子组件在父组件中注册
    // 子组件在父组件中注册，只能在父组件中用，不能再父组件注册Vue中去用
    let fatherConstructor = Vue.extend({
        template: `
            <div>
               <h2>我是父组件</h2>
               <child_component></child_component>
            </div>`,

        components:{
            child_component: childConstructor // 将子组件在父组件中注册
        }
    })

    let app = new Vue({
        el: '#first',
        data:{
        },
        // 将父组件注册在Vue中(局部注册
        // 其实可以将Vue实例看成根组件
        components:{
            father_component: fatherConstructor,   
        }
    })

</script>

</body>
</html>

二、父子组件通信

1. 父传子

1.1 直接数据不能传

子组件的模板中，不能获取父组件或者Vue实例中的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
</head>
<body>

<div id="first">
    <child_component></child_component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
            /*直接获取： 不能获取到*/
    let childConstructor = Vue.extend({
        template: `
                    <div>
                         <h2>我是子组件</h2>
                         <h2>{{message}}</h2>
                    </div>`
    })

    let app = new Vue({
        el: '#first',
        data:{
            message: 'Hello Vue'
        },
        components:{
            child_component: childConstructor,
        }
    })
</script>
</body>
</html>

1.2. 数组预先用props传递

v-bind 功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
</head>
<body>

<div id="first">
    <!--3. 在引用该组件的时候，将1中定义的变量绑定到父组件中-->
    <child_component v-bind:cmessage="message" v-bind:cmovies="movies"></child_component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let childConstructor = Vue.extend({
        /*2. 获取props中的预定义的变量*/
        template: `
                    <div>
                         <h2>我是子组件</h2>
                         <h2>{{cmessage}}</h2>
                         <ul>
                           <li v-for="item in cmovies">{{item}}</li>
                         </ul>
                    </div>`,
        /*1. 首先在子组件中通过 props 定义一个变量： 数组方式*/
        props: ['cmovies', 'cmessage'],
    })

    let app = new Vue({
        el: '#first',
        data: {
            message: 'Hello Vue',
            movies: ['雷神', '钢铁侠', '诛仙', '蚁人', '超新星'],
        },
        components: {
            child_component: childConstructor,
        }
    })
</script>
</body>
</html>

1.3. props–对象

v-bind 功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
</head>
<body>

<div id="first">
    <!--3. 在引用该组件的时候，将1中定义的变量绑定到父组件中-->
    <child_component v-bind:cmessage="message" v-bind:cmovies="movies"></child_component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let childConstructor = Vue.extend({
        /*2. 获取props中的预定义的变量*/
        template: `
                    <div>
                         <h2>我是子组件</h2>
                         <h2>{{cmessage}}</h2>
                         <h2>{{cfirstname}}</h2>
                         <ul>
                           <li v-for="item in cmovies">{{item}}</li>
                         </ul>
                    </div>`,
        /*1. 首先在子组件中通过 props 定义一个变量，对象方式*/
        props:{
            /*1.1  指定数据类型*/
            cmessage: String,
            /*1.2  以对象形式指定类型*/
            cmovies: {
                type:Array,
            }
        }
    })

    let app = new Vue({
        el: '#first',
        data:{
            message: 'Hello Vue',
            movies:['雷神','钢铁侠','诛仙','蚁人','超新星'],
        },
        components:{
            child_component: childConstructor,
        }
    })
</script>
</body>
</html>

1.4 props驼峰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
</head>
<body>

<div id="first">
    <!--1. 如果注册的props的属性是驼峰命名，这里绑定的时候要用 - 分割开-->
    <child_component v-bind:c-first-name="firstName"></child_component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let childConstructor = Vue.extend({
        /*2. 获取props中的预定义的变量*/
        template: `
                    <div>
                         {{cFirstName}}
                    </div>`,
        props:{
            cFirstName: String,
        }
    })

    let app = new Vue({
        el: '#first',
        data:{
           firstName: '舒展',
        },
        components:{
            child_component: childConstructor,
        }
    })
</script>
</body>
</html>

2. 子传父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
</head>
<body>
<div id="first">

    <!--3. 父组件中监听： v-on:参数
                               3.1 参数一：子组件的发射事件名称(不带参数)
                               3.2 监听这个事件后， 父组件中要触发定义的方法-->
    <sz_component v-on:childclick ="fatherclick"></sz_component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    let szConstructor = Vue.extend({
        /*1. 子组件中的点击事件，获取子组件自己的数据，
              1.2 触发 子组件自身 点击事件,且将参数传过去*/
        template: `
                  <div>
                      <h2>我是子组件</h2>
                      <button v-for="book in books" v-on:click="readbook(book)">{{book.name}}</button>
                  </div>
                   `,

        /*0 子组件中保存的数据*/
        data(){
            return {
                books: [
                    {id:'111',name:'java编程'},
                    {id:'222',name:'python入门'},
                    {id:'333',name:'操作系统'},
                    {id:'444',name:'排序算法'},
                ],
            }
        },

        methods:{
            /* 2. 获取参数，同时将函数发射出去:
            *     参数一：发射出去的方法名称，  参数二：发射的具体数据*/
            readbook(item){
                this.$emit('childclick',item);
            }
        }
    })

    /*父组件 --------------------------------------------------*/
    let app = new Vue({
        el: "#first",
        data:{
            message: '张三',
        },
        components:{
            sz_component: szConstructor,
        },
        methods:{
            fatherclick (item) {
                console.log('方法触发')
                console.log(item.name);
            }
        }
    })
</script>
</body>