Vue组件中的父子组件使用

目录 Vue组件中的父子组件 父组件向子组件传值 子组件向父组件传值 Vue父子组件的生命周期 总结

Vue组件中的父子组件

父组件向子 组件传值

父组件通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 子组件需要在内部定义 PR ops 属性。例如 props : [ ‘parentmsg’ ] 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据 所有 props 中的数据都是通过父组件传递过来的

示例1：&nbs p;

<div id="app" style="width: 800px;h ei ght: 100px;background:  red ;">
    <!-- 父组件，可以在引用子组件的时候， 通过属性绑定(v-bind:)的形式,
    把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用-->
    <com1 v-bind:parentmsg="msg" style="width: 500px;height: 50px;background: green;"></com1>
</div>
<script>
    new Vue({
        el:' # app',
        data:{
        msg: '父组件中的数据'
    },
     component s:{
        com1:{
            /*
                注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，
                而是子组件自身私有的，比如： 子组件通过 Ajax,请求回来的数据，都可以
                放到 data 身上；
                data 上的数据，都是可读可写的；
            */
            data(){
                return {
                t IT le: '123',
                content: ' QQ q'
            }
        },
            template: '< h1  @click="change">这是子组件：{{ parentmsg }}</h1>',
            /*
                注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
                把父组件传递过来的 parentmsg 属性，先在 props 数组中定义一下，这样
                才能使用这个数据
            */
            props: ['parentmsg'],
            methods:{
                change: function(){
                    this.parentmsg = '被修改了'
                }
            }
        }
    }
});
</script>

示例2：

<div id="app">
    <input ty PE ="text" v-model="item">
    <div style="width: 200px;height: 150px;background: red;">
        < test  :tt="item"></test>
    </div>
</div>
<template id="temp">
    <div>
        <p v -t ext="tt"></p>
    </div>
</template>
<script>
    Vue .COM ponent("test",{
        props:['tt'],
        template:'#temp'
    })
    new Vue({
        el:'#app',
        data:{
            item:' abc D'
        }
    });
</script>

子组件向父组件传值

子组件向父组件传值是通过方法的方式

示例：

<div id="app" style="width: 500px;height: 300px;background: red;">
    <!-- 父组件向子组件传递方法使用的是 事件绑定 机制；v-on,当我们自定义了 一个
    事件属性之后那么，子组件就能够，通过某些方式，来调用传递进去的这个方法了 -->
    <com2 @func="show"></com2>
    <p>{{ dat am sgFormSon }}</p>
</div>
<template id=" tmp l">
    <div style="width: 300px;height: 200px;background: green;">
        <h1>这是子组件</h1>
        <input type="button" value="是子组件中的按钮" @click="myclick">
    </div>
</template>
<script>
    // 定义了一个字面量类型的组件模板对象
     VAR  com2 = {
        template: '#tmpl', // 通过指定了一个 Id, 表示说，要去加载这个指定 Id 的template 元素中的内容，当作组件的 HT ML  结构
        data() {
            return {
                sonmsg: {
                    name: '大头 儿子 ',
                    age: 6
                }
            }
        },
        methods: {
            myclick() {
                // 当点击子组件的按钮的时候，通过$emit 拿到父组件传递过来的 func 方法
                // emit 英文原意： 是触发，调用、发射的 意思 
                this.$emit('func', this.sonmsg)
            }
        }
    }
// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            datamsgFormSon: null
        },
        methods: {
            show(data) {
                console. LOG ('调用了父组件身上的 show 方法: --- ' + data)
                console.log(data.name);
                this.datamsgFormSon = data
            }
        },
        components: {
            com2
            //com2: com2
         }
    });
</script>

Vue父子组件的生命周期

父子组件的生命周期是一个嵌套的过程

渲染的过程

父beforeCreate->父created->父before mount ->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的 文章 : Vue中父子组件如何实现传值 Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别 vue父子组件动态传值的几种方式及注意问题详解 Vue父子组件传值的三种方法 Vue 父子组件实现数据双向绑定效果的两种方式(案例代码) Vue父子组件通信全面详细介绍 Vue父子组件属性传递实现方法详解

总结

以上是 为你收集整理的 Vue组件中的父子组件使用 全部内容，希望文章能够帮你解决 Vue组件中的父子组件使用 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue组件中的父子组件使用的详细内容...