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

在html里直接引用vue.js，实现自定义组件、子父相互传参

目录

自定义组件

 父组件给子组件传值

子组件向父组件传值

vue3组件用法

---

自定义组件

目录结构

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

二、创建页面index.html

三、编写组件内容

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

//只渲染静态的
// let str = `
//   

//     
//   
// `
// let myComponent = Vue.extend({
//   template:str ,
// })

//或者动态在data中返回
let str = `
  

    
    
{{childrenTxt}}
  
`
let myComponent = Vue.extend({
  template:str ,
  data:function(){
    return {
      childrenTxt:'我是子组件的值哦'
    }
  }
})

Vue.component('my-load',myComponent )  

四、引用组件

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

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

 父组件给子组件传值

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

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

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

二、子组件my_component.js接收值

let str = `
  

    
    
{{childrenTxt}}
    
这是父组件传过来的哦：{{father_data}}
  
`
let myComponent = Vue.extend({
  template:str,
  props:['father_data'],//接收父组件传的值
  data:function(){
    return {
      childrenTxt:'我是子组件的值哦'
    }
  }
})
Vue.component('my-load',myComponent )  

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

子组件向父组件传值

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

let str = `
  

    
    
{{childrenTxt}}
    
这是父组件传过来的哦：{{father_data}}
  
`
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接收子组件的值

    

        
        
        
        
{{childtext}}
    

最后渲染的效果如下：

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

vue3组件用法

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

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

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:`

              
{{item.name}}
          
`,
};

2、index页面引用

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属性来改变方式

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

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

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

index.html

header.js

// header component
export default {
  data() {
    return {};
  },
  methods:{
    menuClick(index){
      this.$emit('menuitem',index)
    }
  },
  props:["header_data","li_current"],
  template:`

              
{{item.name}}
          
`,
};