父组件发送参数，子组件接收参数

最新推荐文章于 2024-05-14 20:49:55 发布

dongsdh

最新推荐文章于 2024-05-14 20:49:55 发布

阅读量657

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/dongsdh/article/details/102955358

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

父组件发送参数

<template>
	<div>
		<Head :message="list" @par="isclick"></Head>
		<i class="iconfont">&#xe697;</i>
		<div>
			<p @click="gochengdu('成都范围','510100')">成都范围</p>
			<p @click="goxiamen('厦门范围','510200')">厦门范围</p>
			<p @click="goguangyuan('广元范围','510300')">广元范围</p>
		</div>
		<div>
			<p v-for="item in list">
				<span @click="nextpage(item)">{{item.name}}</span>
			</p>
		</div>
		<p>{{a}}</p>
		<span @click="test" v-show="btnisshow">测试</span>
	</div>
</template>

<script>
//  import Head from './Head'
//  import alertTip from 'src/components/common/alertTip'
    
    
    export default {
      	data(){
            return{
            	list:[
            		{name:'成都范围list','cityid':510100},
            		{name:'厦门范围list','cityid':510200},
            		{name:'广元范围list','cityid':510300}
            	],
            	btnisshow:false,
            	a:'这是一段文本'
//              showAlert: false,
//              alertText: null,
            }
        },
        mounted(){
        },
        components: {
//      	Head
        },
        computed: {
           
        },
        methods: {
            gochengdu(name,cityid){
            	this.$router.push({
            		path:'./chengdu',
            		query:{a:name,b:cityid}
            	})
            	
            },
            goxiamen(name,cityid){
            	this.$router.push({
            		path:'./xiamen',
            		query:{a:name,b:cityid}
            	})
            },
            goguangyuan(name,cityid){
            	this.$router.push({
            		path:'./guangyuan',
            		query:{a:name,b:cityid}
            	})
            },
            nextpage(item){
            	console.log(item);
            	this.$router.push({
            		path:'./guangyuan',
            		query:{a:item.name,b:item.cityid}
            	})
            },
            test(){
            	layui.use('layer', function() {
            	    layer.msg("Hello",{icon:0,time:2000}); 
            	})
            },
            isclick(){
            	this.btnisshow = !this.btnisshow
            	this.a=`sss`
            	console.log('父组件方法');
            }
        }
    }
</script>


<style>
</style>

子组件接收参数

<template>
	<div>
		<p>{{name}}</p>
		<p>
			<span v-for='item in message' @click="spancontent">
				{{item.name}}
			</span>
		</p>
	</div>
</template>

<script>
	export default {
		props:['message'],
		data(){
			return{
				name:'头部'
			}
		},
		//数据初始化完毕自动调用方法
        created(){
        },
	    methods:{
	    	spancontent(){
	    		console.log(1);
	    		this.$emit('par');
	    	}
	    }
	}
</script>

<style>
</style>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父组件发送参数，子组件接收参数

父组件发送参数<template> <div> <Head :message="list" @par="isclick"></Head> <i class="iconfont">&#xe697;</i> <div> <p @click="gochengdu('成都范围','...
复制链接

扫一扫