vue组件之间的传参

最新推荐文章于 2024-05-29 18:55:00 发布

十二.413

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_62322136/article/details/126149335

版权

1.父组件传子组件：通过props2.子组件传父组件：自定义事件父组件：vue实例；子组件：是放在vue实例挂载点的内部。

摘要由CSDN通过智能技术生成

一、组件之间的传参：

1.父组件传子组件：通过props
2.子组件传父组件：自定义事件

父组件：vue实例；
子组件：<my-button></my-button>

<my-button></my-button>是放在vue实例挂载点的内部

二、父组件传子组件

    <body>
		<div id="app">
			<h1>时间戳：{
  {dt}}</h1>
			<!-- 使用全局组件 -->
			<my-button :name="myname"></my-button>
		</div>
		
	</body>
	<script type="text/javascript">
		//定义全局组件component；页面/vue实例
		//命名；短横杆，驼峰，帕斯卡
		Vue.component('my-button',{
			template:'<div>{
  {msg}}<button @click="fa">全局组件按钮</button><br>name={
  {name}}</div>',//有且只有一个跟标签
			props:['name','sex','age'],
			data(){
				return{
					msg:'全局组件测试'
				}
			},methods:{
				fa(){
					console.log("父组组件传