Advertisement

Vue 3知识点第4点;父→子 / 子→父 / 非父子关系 / 兄弟间相互

阅读量:

前言:

此处展示的是在Vue3框架中实现父组件向子组件传递数据、子组件向父组件回传信息以及非父子组件间数据交互的三种代码实现方式,如需深入了解相关知识,请前往vue3组件详解链接查阅关于组件间数据传递的详细目录,内容讲解极为详尽。

父组件向子组件传递数据

复制代码
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>父向子传值。props</title>
    		<script src="js/vue.global.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<div>我是头部</div>
    			下面是渲染的组件:
    			<!-- 2)子组件上添加属性,绑定这个属性的值为父的data -->
    			<tempbtn :navdata="nav"></tempbtn>
    			
    			<div>我是底部</div>
    		</div>
    		<template id="temp1">
    			<h4>我是组件内容</h4>
    			<ul>
    				<!-- 4)子使用父传过

全部评论 (0)

还没有任何评论哟~