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

总结

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！