vue组件数据传递

1.父组件向子组件传递数据：通过props

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue组件的使用</title>
    <style>
        body{
            color:burlywood;
        }
        .header{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            text-align: center;
        }
        .aside{
            20%;
            height: 1200px;
            background-color:chocolate;
            float: left;
        }
        .content{
            80%;
            height: 1200px;
            background-color:crimson;
            float: left;
        }
        .footer{
             100%;
            height: 40px;
            background-color:darkcyan;
            text-align: center;
            line-height: 40px;
            clear: both;
        }
    </style>
</head>
<body>
    <div id='app'></div>
    <script>
        // 声明组件
        var Vheader = {
            template : `
                <div class='header'>
                    头部区域
                </div>
            `,
        }
        var Vaside = {
            template : `
                <div class='aside'>
                    侧边栏区域
                </div>
            `,
        }
        var Vcontent = {
            // 6.在标签中使用props中的数据
            // 通过props传递数据时，若使用了v-for，必须绑定key
            template : `
                <div class='content'>
                    <ul>
                        <li v-for='(title,index) in titles' :key = 'index'>
                            <h3>{{title}}</h3>
                        </li>
                    </ul>
                </div>
            `,
            // 5.通过props从父组件中拿到数据
            props:['titles'],
        }
        var Vfooter = {
            template : `
                <div class='footer'>
                    脚部内容
                </div>
            `,
        }
        var Vmain = {
            // 4.在当前组件中绑定属性，将从父组件中拿到的数据传入自己的子组件中
            template : `
                <div class='main'>
                    <Vheader/>
                    <Vaside/>
                    <Vcontent :titles = 'titles'/>
                    <Vfooter/>
                </div>
            `,
            components:{
                Vheader,
                Vaside,
                Vcontent,
                Vfooter,
            },
            // 3.通过props从当前组件的父组件拿数据
            props:['titles'],
        }
        new Vue({
            el:'#app',
            // 1.在data中声明数据
            data(){
                return{
                    titles:['标题一','标题二','标题三','标题四'],
                }
            },
            // 使用组件
            // 2.在父组件中绑定属性，将data中的数据传到子组件中
            template:`
                <Vmain :titles = 'titles'></Vmain>
            `,
            // Vue实例化对象的template中需要一个包裹所有元素的根元素，否则会报错
            // 挂载组件
            components:{
                Vmain,
            }
        })
    </script>
</body>
</html>

2.子组件向父组件传递数据：通过自定义事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>vue组件的使用</title>
    <style>
        body{
            color:burlywood;
        }
        .header{
             100%;
            height: 40px;
            background-color: #333;
            line-height: 40px;
            text-align: center;
        }
        .aside{
            20%;
            height: 1200px;
            background-color:chocolate;
            float: left;
        }
        .content{
            80%;
            height: 1200px;
            background-color:crimson;
            float: left;
        }
        .footer{
             100%;
            height: 40px;
            background-color:darkcyan;
            text-align: center;
            line-height: 40px;
            clear: both;
        }
    </style>
</head>
<body>
    <div id='app'></div>
    
    <script>
        var Vheader = {
            template : `
                <div class='header'>
                    头部区域
                </div>
            `,
        }
        var Vaside = {
            // 1.在html标签中绑定原生js事件
            template : `
                <div class='aside'>
                    工具
                    <br/>
                    <button @click='addFontSize'>字体+</button>

                </div>
            `,
            methods:{
                // 2.在methods中声明所使用的方法
                addFontSize(){
                    // 3.调用内建的this.$emit()方法触发父组件的自定义事件
                    // this.$emit()方法，可传入两个参数，第一个参数时事件名称，第二个参数是传入事件的参数
                    this.$emit('addFontSize');
                }
            },
        }
        var Vcontent = {
            template : `
                <div class='content'>
                    <ul>
                        <li v-for='(title,index) in titles' :key = 'index'>
                            <h3>{{title}}</h3>
                        </li>
                    </ul>
                </div>
            `,
            props:['titles'],
        }
        var Vfooter = {
            template : `
                <div class='footer'>
                    脚部内容
                </div>
            `,
        }
        var Vmain = {
            // 5.在template中绑定自定义事件传给子组件
            template : `
                <div class='main' :style='{fontSize:fontSize+"px"}'>
                    <Vheader/>
                    <Vaside @addFontSize='addFontSize'/>
                    <Vcontent :titles = 'titles'/>
                    <Vfooter/>
                </div>
            `,
            components:{
                Vheader,
                Vaside,
                Vcontent,
                Vfooter,
            },
            // 注意：data必须是一个函数
            data(){
                return {
                    fontSize:16,
                } 
            },
            methods:{
                // 4.在methods中自定义事件
                addFontSize(){
                    this.fontSize += 1;
                }
            },
            props:['titles'],
        }
        new Vue({
            el:'#app',
            data(){
                return{
                    titles:['标题一','标题二','标题三','标题四'],
                }
            },
            template:`
                <Vmain :titles = 'titles'></Vmain>
            `,
            components:{
                Vmain,
            }
        })
    </script>
</body>
</html>

　　3.平行组件通信：创建bus实例，通过bus挂载（$on）和调用（$emit）事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <App></App>
    </div>
    <script src="./vue.js"></script>
    <script>
        //1.实例化一个bus对象
        const bus = new Vue();
        // 中央事件总线 bus
        Vue.component('B', {
            data() {
                return {
                    count: 0
                }
            },
            template: `
                <div>{{count}}</div>
            `,
            created(){
                // 2. $on 绑定事件
                bus.$on('add',(n)=>{
                    this.count+=n;
                })
            }
        })

        Vue.component('A', {
            template: `
                <div>
                 <button @click='handleClick'>加入购物车</button> 
                </div>
            `,
            methods:{
                 handleClick(){
                    // 3.触发绑定的函数 // $emit 触发事件
                     bus.$emit('add',1);
                 }
            }
        })
        const App = {
            template: `
                <div>
                    <A></A>
                    <B></B>
                </div>
            `,
        }
        new Vue({
            el: '#app',
            components: {
                App
            }
        })
    </script>
</body>

</html>

4.嵌套组件通信，父组件 provide来提供变量,然后再子组件中通过inject来注入变量.无论组件嵌套多深

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <App></App>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('B', {
            data() {
                return {
                    count: 0
                }
            },
            inject:['msg'],
            created(){
                console.log(this.msg);
            },
            template: `
                <div>
                    {{msg}}
                </div>
            `,
        })

        Vue.component('A', {
            created(){
                console.log(this);   
            },
            template: `
                <div>
                     <B></B>
                </div>
            `
        })
        const App = {
            data() {
                return {
                    title:"老爹"
                }
            },
            provide(){
                return {
                    msg:"老爹的数据"
                }
            },
            template: `
                <div>
                    <A></A>
                </div>
            `,
        }
        new Vue({
            el: '#app',
            components: {
                App
            }

        })
    </script>
</body>

</html>

5.$parrent $children 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shannen/p/12492121.html