Vue页面间数据传递

最新推荐文章于 2024-07-12 15:14:43 发布

qq_46441526

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量247

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46441526/article/details/127816695

版权

Vue页面间数据传递

参考：https://www.cnblogs.com/dhui/p/12926794.html

父页面

				<v-flex md8 sm12 xs12>
                    <div  class="card" id="graph">
                        <p>Trends</p>
                        <div class="trendWrap">
                            <TrendBox @parentFunc="getMe" height="21vw" :active="element.atomicNumber" id="graph1" />
                        </div>
                    </div>
                </v-flex>

<script>
import TrendBox from "./home/TrendBox";

 methods: {
        //获得子组件（TrendBox）数据
        getMe(data) {
	        this.support = data
            //alert(data)
	    },
}	    
</script>

子组件

methods: {

    //传值给ElementPage页面
    sendDataToElementPage(){
      // 子组件给父组件传值，通过 $emit 的方法参数传递
      this.$emit('parentFunc', this.trend)
      alert(this.trend)
    },
}

然后调用sendDataToElementPage()即可传递trend数据