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>