首页 前端知识 HTML如何引入vue自定义组件

HTML如何引入vue自定义组件

2024-06-14 09:06:51 前端知识 前端哥 12 830 我要收藏

1、新建一个js文件,创建子组件,例:test-component.js


Vue.component('test-component', {
    template: `
    <div v-if="isshow">{{userno}} - {{username}}</div>
    `,
    props: ['isshow'], // html接收字段名都是小写,单向传递
    data() {
        return {
            username: '',  // 组件内部属性
			userno: '',    
        }
    },
    watch: { // 传值发生改变触发事件
       isshow: {
			handler(newVal, oldVal) {
				console.log('isshow旧值:' + oldVal);
				console.log('isshow新值:' + newVal);
				// 根据值的改变,写相应逻辑代码
                this.getInfo();
			}
		},
    },
    methods: { // 组件内方法
        getInfo(){
            
        }
    }
})

2、新建html文件,创建父组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 引入VUE文件 -->
    <script src="./js/vue.js"></script>
     <!-- 引入子组件js文件 -->
    <script src="./js/test-component.js"></script>
</head>
<body>
    <div id="app">
        <test-component :isshow="isshow"></test-component>
      </div>
</body>
<script>
  
    var app = new Vue({
      el: '#app',
      data() {
            return {
                isshow:ture
            }
        }
 
    });
  </script>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12104.html
标签
评论
发布的文章

fastjson升级为fastjson2

2024-06-20 09:06:18

protobuf对象与JSON相互转换

2024-06-20 09:06:14

NVM 及 PNPM 安装

2024-06-20 09:06:01

npm有哪些插件包??

2024-06-20 09:06:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!