Vue.js -- 渐进式JavaScript框架（3）

最新推荐文章于 2022-05-25 14:57:24 发布

Lazy_Life

最新推荐文章于 2022-05-25 14:57:24 发布

阅读量266

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/Lazy_Life/article/details/81320531

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.Vue.js 中父级与子级组件间的通信：

注意：父级操控父级，子级操控子级，随后再进行连接；

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <father></father>
    </div>
    <script>
        //创建父级组件
        Vue.component('father',{
            data : function(){            //必须要加
                return {
                    myValue : '',
                    val : '这是父组件'
                }
            },
            template : `<div>
                <b>{{val}}</b>
                <input type='text' v-model='myValue'>
                <hr>
                <son v-bind:msg='myValue'></son>            //父级写父级，子级写子级，通过这段话将它们进行连接
            </div>`
        })
        //创建子级组件
        Vue.component('son',{
            props : ['msg'],            //必须要加
            template : `<h3>{{'接收到父级的数据为：' + msg}}</h3>`
        })
        //实例
        new Vue({
            el : '#module',
            data : {
                str : 'hello Vue',
            }
        })
    </script>
</body>

2.Vue.js 中子级和父级组件间的通信：

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <father></father>
    </div>
    <script>
        //创建父组件
        Vue.component('father',{
            data : function(){                  //数据层
                return {
                    val : '这是父组件'
                }
            },
            methods : {                         //方法层
                receive : function(msg){           //创建一个接收事件，传递参数
                    alert('接收到子级的数据为' + msg)
                }                      
            },  
            template : `<div>
                <h2>{{val}}</h2>
                <hr>
                <son v-on:toFather='receive'></son>            //通过这段话将父级和子级组件进行连接           
            </div>`  
        })
        //创建子组件
        Vue.component('son',{
            data : function(){
                return {
                    uname : '这是子组件'
                }
            },
            methods : {
                transfe : function(){               //创建一个传输事件
                    this.$emit('toFather',120)        
                }
            },
            template : `<div>
                <b>{{uname}}</b>
                <button  @click='transfe'>向父组件通过事件传值</button>
            </div>`
        })
        //实例
        new Vue({
            el : "#module",
            data : {
                str : 'hello vue'
            }
        })
    </script>
</body>

3.父级与子级之间通信的总结：

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <father></father>
    </div>
    <script>
        //创建父组件
        Vue.component('father',{
            data : function(){                           //数据层
                return {
                    val : '这是父组件',
                    result : '',
                }
            },
            methods : {                                 //方法层
                receive : function(msg){                   //自定义一个事件，接收子组件传来的数据
                    consolle.log('从子组件接收到的数据' + msg)
                    this.result = msg;
                }
            },
            template : `<div>
                <h3>{{val}}</h3>
                <h4>接收子组件传来的数据为：{{result}}</h4>
                <hr>
                //核心
                <son name='jack' @toFather='receive'></son>               
            </div>`
        })
        //创建子组件
        Vue.component('son',{
            data : function(){
                return {
                    val01 : '这是子组件',
                    myValue = '', 
                }
            },
            methods : {
                transfe : function(){                 //自定义一个事件，向父组件传输数据
                    this.$emit('toFather',this.myValue)        //第一个参数是自定义的事件名，第二个参数是要传输的数据
                }
            },
            props : ['name'],                         //接收父组件的数据必须要经过这一步
            template : `<div>
                <h4>{{val01}}</h4>
                <h3>接收父组件传来的名字：{{name}}</h3>

                请输入：<input type='text' v-model='myValue'>

                <button @click='transfe'>点击将数据传到父组件中</button>
            </div>`
        })
        //实例
        new Vue({
            el : "#module",
            data : {
                str : 'hello vue'
            }
        })
    </script>
</body>

4.父级和子级间数据，方法的获取：

（1）this.$refs.myChild：父级获取子级的数据，方法等；

（2）this.$parent：子级获取父级的数据，方法等；

<body>
    <div id="module">
        <h1>{{str}}</h1>
        <father></father>
    </div>
    <script>
        //创建父组件
        Vue.component('father',{
            data : function(){                           //数据层
                return {
                    val : '这是父组件',
                }
            },
            methods : {
                getSon : function(){
                    console.log(this.$refs)              //输出myChild这个对象
                    //获取子组件的数据
                    var result = this.$refs.myChild.val;
                    console.log(result)                  //输出'这是子组件'
                    //获取子组件的方法
                    var fun = this.$refs.myChild.getAge();
                    console.log(fun)                     //输出22
                }
            },
            template : `<div>
                <h3>{{val}}</h3>
                <button @click='getSon'>查看子组件的数据和方法</button>
                <hr>
                //核心（固定写法）
                <son ref='myChild'></son>               
            </div>`
        })
        //创建子组件
        Vue.component('son',{
            data : function(){
                return {
                    val : '这是子组件',
                }
            },  
            methods : {
                getAge : function(){
                    return 22;
                },
                getFather : function(){
                    console.log($parent)
                    //获取父组件的数据
                    var result = this.$parent.val;
                    console.log(result)                    //输出'这是父组件'
                }
            },                       
            template : `<div>
                <h4>{{val}}</h4>
                <button @click='getFather'>调用父组件中的属性和方法</button>
            </div>`
        })
        //实例
        new Vue({
            el : "#module",
            data : {
                str : 'hello vue'
            }
        })
    </script>
</body>