Vue组件的嵌套和通信

最新推荐文章于 2024-02-08 10:28:07 发布

11adaacc

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量217

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Rayshaan/article/details/113485934

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

文章目录

01.组件嵌套

<body>
    <div id="app">
        <login></login>
    </div>

    <template id="login">
        <div>
            <ul>
                <li @click="aaa='account'">360帐号登陆</li>
                <li @click="aaa='phone'">手机号登陆</li>
            </ul>
            <!-- 组件里再嵌套组件 -->
            <component :is='aaa'></component>
        </div>
    </template>

    <template id="account">
        <div>
            <h1>360帐号登陆</h1>
        <input type="text" placeholder="360帐号登陆">
        </div>
    </template>
    <template id="phone">
        <div>
            <h1>手机号登陆</h1>
            <input type="text" placeholder="手机号登陆">
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        let account={template:'#account'};
        let phone={template:'#phone'};
        let login={
            template:'#login',
            data(){
                return {
                    aaa:'account'
                }
            },
            //将account和phone挂载到login上
            components:{
                'account':account,
                'phone':phone
            }
        }
        new Vue({
            el:"#app",
            components:{
                'login':login
            }
        })
    </script>
</body>

在这里插入图片描述

02.组件通信

父组件：内部嵌套了组件的组件
子组件：嵌套在组件内部的组件
一般情况下父子组件是不能直接通信的，父/子组件不能使用子/父组件的值
如果父/子组件直接使用子/父组件的变量，会报错 变量 is not defind

03.父组件传参给子组件

父组件的值传递给子组件

在占位符中 :a="fmsg" a子组件中需要接收的数据(自定义) fmsg父组件数据
在子组件中定义属性 props 接收a props:['a']
在子组件中可以直接使用a
父组件的值变化，子组件的值会跟着变化

<body>
    <div id="app">
        {{fmsg}}<br>
        <button @click='change()'>点击修改父组件的数据</button>
        <v-header :a='fmsg'></v-header>
    </div>
    <template id="header">
        <div>
            <h1>这是头部{{a}}</h1>
            <button @click='change()'>点击修改从父组件接收的数据</button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        let header={
            template:'#header',
            data(){
                return {
                    smsg:'这是子组件的数据'
                }
            },
            props:['a'],
            methods:{
                change(){
                    this.a+=2;
                }
            }
        }
        new Vue({
            el:'#app',
            data:{
                fmsg:'这是父组件的数据'
            },
            methods:{
                change(){
                    this.fmsg+=1;
                }
            },
            components:{
                'v-header':header
            }
        })
    </script>
</body>

在这里插入图片描述
修改父组件的数据

修改子组件的数据

2个问题：

传参后，修改子组件的数据时会报错(可以忽略)
传参后，修改子组件值的时候让父组件的值也改变(购物车加减)

修改子组件的数据时会报错：
在这里插入图片描述

//在子组件里直接使用m
<h1>这是头部{{m}}</h1>

var header={
	template:'#header',
	data(){
		return {
			msg:'这是子组件数据',
			m:this.a,
		}
	},
	// 监听变量a的变化，如果a有变化的时候，直接赋值给m。相当于找了个m来接收数据
	watch:{
		a(){
			this.m=this.a;
		}
	},
	props:['a'],
	methods:{
		change(){
			this.m+=2;
		}
	}
}

让两个值一起改变：链接

05.子组件传参给父组件

子组件传参给父组件

在子组件中定义一个方法(该方法用来定义事件)。方法内部定义事件 this.$emit('事件名',所需要发送的数据(发送给父组件的数据))
在占位符中 @事件名(在子组件中定义的事件)="方法名(不加括号，需要在父组件中定义)"
在父组件中，定义接收数据的方法
在子组件中，执行刚刚定义的事件方法。

<body>
    <div id="app">
        {{msg}}<br>
        <button @click='change()'>点击修改父组件的数据</button>
        <!-- 占位符中发送数据 -->
        <v-header @send="get"></v-header>
    </div>
    <template id="header">
        <div>
            <h1>这是头部{{num}}</h1>
            <button @click='change()'>点击修改从父组件接收的数据</button>
            <!-- 子组件中执行fn方法 -->
            {{fn()}}
        </div>

    </template>


    <script src="js/vue.js"></script>
    <script>
        let header={
            template:'#header',
            data(){
                return {
                    num:'这是子组件的数据'
                }
            },
            methods:{
            //子组件中定义方法
                fn(){
                    this.$emit('send',this.num)
                },
                change(){
                    this.num+=1;
                }
            }
        }
        new Vue({
            el:"#app",
            data:{
                msg:'这是父组件的数据'
            },
            methods:{
            	//父组件中接受数据
                get(a){
                    this.msg=a;
                }
            },
            components:{
                'v-header':header
            }
        })
    </script>
</body>