首页HTML/CSSJavaScript服务端数据库移动开发前端开发网站建设开发工具视频教程在线实例整站源码直播即时通讯支付图标库网站部署抓包工具调试工具前端框架地图其他框架
欢迎访问程序员学习网站

ddddd

当前位置： 码农之家-程序员学习> HTML5> vue组件、html里引用vue.js，实现自定义组件，子父组件相互传参、vue2组件、vue3组件用法、component、组件传值

vue组件、html里引用vue.js，实现自定义组件，子父组件相互传参、vue2组件、vue3组件用法、component、组件传值

作者：程序员11 时间：2023-06-21 人气：597 QQ交流群\邮箱:1003265987@qq.com
vue组件、html里引用vue.js，实现自定义组件，子父组件相互传参、vue2组件、vue3组件用法、component、组件传值
要展示的内容

自定义组件

目录结构

image.png

一、首先，引用vue.js到页面，版本根据自己的需要，我这里是2点多的版本

<script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>

二、创建页面index.html

<body>
    <div id="app">
        <!-- my-load 就是我自定义的组件 -->
        <my-load></my-load>
    </div>
</body>

三、编写组件内容

新建一个js文件，内容如下，我这里文件名是 my_component.js

//只渲染静态的
// let str = `
//   <div class="page-loading">
//     <img src='images/load.png'>
//   </div>
// `
// let myComponent = Vue.extend({
//   template:str ,
// })
 
//或者动态在data中返回
let str = `
  <div class="page-loading">
    <img src='https://res.5i5j.com/wap/focusrent/images/load.png'>
    <p>{{childrenTxt}}</p>
  </div>
`
let myComponent = Vue.extend({
  template:str ,
  data:function(){
    return {
      childrenTxt:'我是子组件的值哦'
    }
  }
})
 
Vue.component('my-load',myComponent )

四、引用组件

在刚刚创建的index.html文件中引用刚刚创建组件文件my_component.js

<script src="js/my_component.js"></script>
<script>
new Vue({
    el:'#app',
    data:{},
    mounted(){},
    methods:{},
})
</script>

这时候看页面组件的结构已经渲染到页面了，效果如下

image.png

父组件给子组件传值

一、父组件也就是index.html准备数据 ，传给子组件也就是my_component.js

注意：组件传值的名字不可以大写，要小写

例如：father_data 就通过它传给子组件，子组件就是通过father_data来接收，testTxt是要传的值 ，father_data 不能有大写字母，否则值传不过去

<body>
    <div id="app">
        <!-- my-load 就是我自定义的组件 -->
        <my-load :father_data="testTxt"></my-load>
    </div>
</body>
<script src="js/my_component.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        testTxt:'今天是周末啊',
    },
    mounted(){},
    methods:{},
})
</script>

二、子组件my_component.js接收值

let str = `
  <div class="page-loading">
    <img src='https://res.5i5j.com/wap/focusrent/images/load.png'>
    <p>{{childrenTxt}}</p>
    <h1>这是父组件传过来的哦：{{father_data}}</h1>
  </div>
`
let myComponent = Vue.extend({
  template:str,
  props:['father_data'],//接收父组件传的值
  data:function(){
    return {
      childrenTxt:'我是子组件的值哦'
    }
  }
})
Vue.component('my-load',myComponent )

最后渲染的页面效果如下：

image.png

子组件向父组件传值

一、子组件my_component.js 准备数据和传值给父组件index.html

let str = `
  <div class="page-loading">
    <img src='https://res.5i5j.com/wap/focusrent/images/load.png'>
    <p @click="clickFun">{{childrenTxt}}</p>
    <h1>这是父组件传过来的哦：{{father_data}}</h1>
  </div>
`
let myComponent = Vue.extend({
  template:str,
  props:['father_data'],
  data:function(){
    return {
      childrenTxt:'我是子组件的值哦',
      childrenData:'放假啦'
    }
  },
  methods:{
    clickFun(){//当点击这个p标签的时候把值传给父组件
      this.$emit('childfun',this.childrenData)
    }
  },
})
Vue.component('my-load',myComponent )

二、父组件index.html接收子组件的值

<body>
    <div id="app">
        <!-- my-load 就是我自定义的组件 -->
        <my-load :father_data="testTxt" @childfun="childfun"></my-load>
        <!-- childfun 触发接收子组件的值 childtext接收到子组件传过来的值 -->
        <p>{{childtext}}</p>
    </div>
</body>
<script src="js/my_component.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        testTxt:'今天是周末啊',
        childtext:'',//用来存接收子组件的值
    },
    mounted(){},
    methods:{
        childfun(val){
            console.log('val',val)
            this.childtext = val
        },
    },
})
</script>

最后渲染的效果如下：

image.png

image.png

以上是vue写法，以下为vue3写法

vue3组件用法

自定义一个简单的header头部引入index

1、新建index.html 、同级新建目录 components ，该目录下新建组件header.js

image.png

2、组件header.js添加内容 

/**
 **props 接收index传递过来的值header_data 和 li_current
 **header_data 是index页面 传递给 header组件的导航数据
 **menuClick 点击方法, menuitem 传递给index的点击方法，并把值index传递过去
*/
 
export default {
  data() {
    return {};
  },
  methods:{
    menuClick(index){
      this.$emit('menuitem',index)
    }
  },
  props:["header_data","li_current"],
  template:`<ul class="header-sty">
              <li v-for="(item,index) in header_data" :key="index" :class="li_current == index ?'cur':'' " @click="menuClick(index)">{{item.name}}</li>
          </ul>`,
};

2、index页面引用

<!-- header_data 与 li_current 是传递给 组件header的数据  -->
<!-- menuitem 接收子组件的方法  -->
<top-header :header_data="headerdata" :li_current="liCurrent" @menuitem="menuitem"></top-header>
const headerdata = ref([])//定义导航数据类型
const liCurrent = ref(0)//当前导航下标
 
headerdata.value = [{id:0,name:'首页'},{id:0,name:'列表'},{id:0,name:'详情'},{id:0,name:'其他'},]
 
//点击导航改变当前index,传给组件header
const menuitem = (index) => {
   console.log(index)
   liCurrent.value = index
}

注意：

html中默认不能使用module形式,即不能用import导入文件,会报如下图错误

解决办法：在script标签上加上type=module属性来改变方式

image.png

<script type="module" type="text/javascript"> 
    import { test } from 'test.js'
    //do something
</script>

踩坑：注册组件名字 header 、Header 无效，需要换其他的名字

到此完成vue3在html里的组件应用，效果如下：

image.png

 最后附vue3组件的完整代码示例：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
*{padding:0;margin:0;border:0}
.header-sty{height:50px;border-bottom: 2px solid;width: 100%;line-height: 50px;}
.header-sty li{list-style: none;;float: left;margin-right: 20px;font-size: 14px;cursor: pointer;}
.header-sty li.cur{font-weight: bold;color:red}
</style>
<title></title>
</head>
<body>
<div id="app" >
  <top-header :header_data="headerdata" :li_current="liCurrent" @menuitem="menuitem"></top-header>
</div>
</body>
</html>
 
<script type="text/javascript" src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script type="module" >
const { createApp, reactive, toRefs, ref, watch, onMounted ,onBeforeMount} = Vue;
import Header from './components/header.js'
 
const app = createApp({
  setup() {
    const headerdata = ref([])//定义导航数据类型
    const liCurrent = ref(0)//当前导航下标
 
    onMounted(() => {
      headerdata.value = [{id:0,name:'首页'},{id:0,name:'列表'},{id:0,name:'详情'},{id:0,name:'其他'},]
      console.log(headerdata.value)
    })
    //点击导航改变当前index,传给组件header
    const menuitem = (index) => {
      console.log(index)
      liCurrent.value = index
    }
    return{
      headerdata,
      menuitem,
      liCurrent
    }
  },
})
 
app.component('top-header', Header);
app.mount("#app");
</script>

header.js

// header component
export default {
  data() {
    return {};
  },
  methods:{
    menuClick(index){
      this.$emit('menuitem',index)
    }
  },
  props:["header_data","li_current"],
  template:`<ul class="header-sty">
              <li v-for="(item,index) in header_data" :key="index" :class="li_current == index ?'cur':'' " @click="menuClick(index)">{{item.name}}</li>
          </ul>`,
};

链接：https://blog.csdn.net/qq_39109182/article/details/127821485

本文链接:https://www.1024dongnn.com/html5/857.html
温馨提示:

欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。

vue组件、html里引用vue.js，实现自定义组件，子父组件相互传参、vue2组件、vue3组件用法、component、组件传值---相关文章

HTML5-热门文章

活跃用户

评论区

ddddd

程序员-学习的网站-想学习编程的码农可以进来看看

首页

视频教程

购物车

我的订单