背景： 在php中开发新页面
1. 初始化
- 创建 vue3 的'app'容器并挂载
- 用 use 方法 挂载 UI 框架
- 其他跟正常使用 vue3 没啥区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/naive-ui"></script>
</head>
<body>
<div id="app">
<n-button>{{ message }}</n-button>
</div>
<script>
const { ref, onMounted, computed } = Vue;
const App = {
setup() {
const message = ref('hello')
onMounted(() => {
})
return {
message
}
}
}
const app = Vue.createApp(App)
app.use(naive)
app.mount('#app')
</script>
</body>
</html>
2. 这里着重介绍怎么在HTML中拆分 vue3 组件
子组件 son-component.js
<!-- 接收Vue实例并结构方法 -->
const MyComponent = ({ ref, onMounted, computed }) => {
return {
name: 'MyComponent',
<!-- 这里注意要用反引号 -->
template: `
<n-button @click="btnClick">{{ message }}</n-button>
`,
<!-- 接收父组件的传值 -->
props: ["msg"],
<!-- 注册子传父触发事件 -->
emits: ["sonclick"]，
setup(props, ctx) {
const message = ref('我是子组件')
const btnClick = () => {
ctx.emit("sonclick")
}
onMounted(() => {
console.log(props.msg ,'接收父组件值')
})
return {
message,
btnClick
}
}
}
}
父组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/naive-ui"></script>
<!-- 1.引入子组件 -->
<script src="path/son-component.js"></script>
</head>
<body>
<div id="app">
<n-button>{{ message }}</n-button>
<!-- 3. 挂载子组件 -->
<my-component msg="接收我的值" @sonclick="() => console.log('子组件触发了')" />
</div>
<script>
const { ref, onMounted, computed } = Vue;
const App = {
setup() {
const message = ref('hello')
onMounted(() => {
})
return {
message
}
}
}
const app = Vue.createApp(App)
<!-- 2.注册子组件 -->
<!-- 这里注意要把Vue实例通过传参给子组件，子组件才能使用ref等方法 -->
app.component('my-component', MyComponent(Vue));
app.use(naive)
app.mount('#app')
</script>
</body>
</html>
3. 子组件更新
由于组件是通过script对象形式挂载的,传给子组件的值就算更新了，子组件也不会得到更新，但是可以利用组件的key值改变触发组件的更新重新渲染。
<my-component :key="keyRef" msg="接收我的值" @sonclick="() => console.log('子组件触发了')" />
const keyRef = ref(Date.now())
// 更新组件
const update = () => {
keyRef.value = Date.now()
}
补充：# vue3-sfc-loader 你还可以利用此插件直接创建vue的后缀文件,这样可以正常使用vue的格式结构写样式逻辑
