vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

最新推荐文章于 2024-04-03 10:01:48 发布

weixin_34126557

最新推荐文章于 2024-04-03 10:01:48 发布

阅读量473

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sophiazhu/p/10396465.html

版权

1，在初始文件index.html中加入要引入的模块,注意驼峰命名的方式（我就是没写成驼峰，报错）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>my-first-vue-project</title>
  </head>
  <body>
    <div id="app">        
        <com-a></com-a>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

2，在mian.js可以看见标签<com-a>如何引入

import Vue from 'vue'

// import comA from './components/a'
import comA from './components/a'

new Vue({
    el: '#app',
    components: { comA },
    template: '<comA/>'
    
})

3，a.vue（注意，我在a模块加了标签<com-b>,不是html标签，其实就是vue引入新的子组件）

分3步：

在父页面（a.vue）上引入写好的组件

import comB from './b' //comB为组件的name

注册组件

components:{ //注册组件
comB

驼峰命名的方式

<com-b> </com-b>

<template>
<div> I am a 'a' component
<com-b></com-b>
</div>

</template>


<script>
import comB from './b'
export default {
    components: {comB}
}
</script>

页面如何传数据给组件

页面：

<com-a :prop-data="0" > </com-a>

// prop-data 传到组件的数据

组件：

export default {
　　components: {comB},
　　props: ['propData']
}

可以用this.propData获取到props（页面传过来的值）为0

转载于:https://www.cnblogs.com/sophiazhu/p/10396465.html

weixin_34126557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

1，在初始文件index.html中加入要引入的模块,注意驼峰命名的方式（我就是没写成驼峰，报错）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,ini...
复制链接

扫一扫