Vue组件中的父子组件使用

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

Vue组件中的父子组件

父组件向子组件传值

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

示例1:

<div id="app" style="width: 800px;height: 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: '父组件中的数据'
    },
    components:{
        com1:{
            /*
                注意: 子组件中的 data 数据,并不是通过 父组件传递过来的,
                而是子组件自身私有的,比如: 子组件通过 Ajax,请求回来的数据,都可以
                放到 data 身上;
                data 上的数据,都是可读可写的;
            */
            data(){
                return {
                title: '123',
                content: 'qqq'
            }
        },
            template: '<h1 @click="change">这是子组件:{{ parentmsg }}</h1>',
            /*
                注意: 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的
                把父组件传递过来的 parentmsg 属性,先在 props 数组中定义一下,这样
                才能使用这个数据
            */
            props: ['parentmsg'],
            methods:{
                change: function(){
                    this.parentmsg = '被修改了'
                }
            }
        }
    }
});
</script>

示例2:

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

子组件向父组件传值

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

示例:

<div id="app" style="width: 500px;height: 300px;background: red;">
    <!-- 父组件向子组件传递方法使用的是事件绑定机制;v-on,当我们自定义了 一个
    事件属性之后那么,子组件就能够,通过某些方式,来调用传递进去的这个方法了 -->
    <com2 @func="show"></com2>
    <p>{{ datamsgFormSon }}</p>
</div>
<template id="tmpl">
    <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 元素中的内容,当作组件的 HTML 结构
        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->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

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

父组件更新过程

父beforeUpdate->父updated

销毁过程

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

总结

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

(0)

相关推荐

  • vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

  • Vue实现父子组件页面刷新的几种常用方法

    目录 1.原地页面重新加载(不推荐) 2.空白页面作为过渡 3.使用Provide / Inject组合控制显示 4.v-on:param父组件监听子组件事件 参考文档: 很多时候我们在操作过页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望返回的界面中的数据要和数据库中的数据进行同步,就需要刷新当前页面,如果是使用ajax可以使用异步请求实现页面的局部刷新,Vue常用的几种刷新页面方法如下: 1.原地页面重新加载(不推荐) this.$router.go(0) //根据路由重新定

  • vue中父子组件的参数传递和应用示例

    1.在父组件中调用子组件,父亲传值给子组件 子组件如下,把要传给给父亲的值放在props中 template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''"> <

  • vue项目中v-model父子组件通信的实现详解

    前言 我们在vue项目中,经常有这样的需求,父组件绑定v-model,子组件输入更改父组件v-model绑定的数值.很多朋友对这种操作不是很清楚,这需要对v-model有比较深入的了解,今天谈谈v-model. vue的双向数据绑定 v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相

  • Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据 2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 子组件向父组件中传递数据 主要谈谈2中情景的实现,有三种方式: 一. 通过props,父组件向子组件中传递数据和改变数据的函数,通过在子组件中调用父组件传过来的函数,达到更新父组件数据(向父组件传递数据)的作用(子组件中需要有相应的响应事件) 二. 通过在子组件中触发一个 自定义事件(vm.$emit),将数据作为v

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • vue 进阶之实现父子组件间的传值

    本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head&g

  • vue单页开发父子组件传值思路详解

    vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结. GitHub地址:https://github.com/leileibrother/wechat-vue 文件目录如下图,example.vue是父组件,exampleChild.vue是子组件. 父组件引入子组件,父组件html的代码如下: <template> <div> <h3>这是父组件</h3> <p style="marg

  • Vue使用.sync 实现父子组件的双向绑定数据问题

    1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ,封装起来,所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能.当一个子组件改变了一个 pr

  • vue3中的父子组件通讯详情

    目录 一.传统的props 二.通过modeValue绑定 三.事件广播(vue3中$on和$emit已废弃),使用新的插件mitt 一.传统的props 通过在父组件中给子组件传值,然后在子组件中通过props接受数据 //父组件 <ValidateInput type="text" v-model="emailVal" :rules='emailRules' placeholder='请输入邮箱地址' ref="inputRef" &g

  • Vue2.x中的父子组件相互通信的实现方法

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • vue slot 在子组件中显示父组件传递的模板

    父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&

随机推荐

其他