<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue3-demo</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="https://unpkg.com/vuex@next"></script>
</head>
<body>
<div id="app" style="width: 100vw;height: 100vh;">
原有数据，测试是否会被销毁？
</div>
</body>
</html>
<script>
const { createApp ,ref ,reactive , defineProps , defineEmits ,toRefs , onMounted} = Vue
/**
* defineProps 和 defineEmits 必须在 <script setup> 中，才能使用。并且在 <script setup> 中，并不需要导入。
* 用setup组合API 替换 vue2 中的data/computed/watch/methods等选项。
* 选项式的 beforeCreate、created，被setup替代了。
* setup表示组件被创建之前、props被解析之后执行，它是组合式 API 的入口。
* 选项式的 beforeDestroy、destroyed 被更名为 beforeUnmount、unmounted。
* 在使用 setup组合时，不建议使用选项式的生命周期，建议使用 on* 系列 hooks生命周期。
* */
const vue3Child = {
template: `
<div>
自身数据：{{data.name}}<br>
接收父级传过来的数据：{{childData}}<br>
<button @click="setParentData">向父组件传数据</button>
</div>
`,
/**
* 在不是 <script setup> 语法糖中，props 和 emits 需要声明后，才能在setup中使用。
* props 在第一个参数props 中。
* emit 在第二个参数context 中。
* */
props: {
childData: {
type: String,
default: "",
}
},
emits:{
setParentData:null
},
setup(props,context){
//props 需要在上面props声明后使用，不然为 undefined
//context ：上下文，包括 attrs (Attribute)、 emit(触发事件) 、slots (插槽)。
//data
const data = reactive({
name:'我是子级数据'
})
//methods
const setParentData = () => {
context.emit('setParentData',"我是子组件给父组件传递的数据")
}
const { childData } = toRefs(props); // 将props接收的数据，转成响应式的
return{
data,
childData,
setParentData
}
},
mounted(){
console.log("子组件的mounted"); //生效
},
onMounted(){
/**
* onMounted 不生效
* 结论： 在不是<script setup> 语法糖中，on* 系列的生命周期函数 无效
* */
console.log("子组件的onMounted");
}
}
const vue3Parent = {
template: `
<div>
自身数据：{{data.name}}<br>
接收子组件数据：{{getChildData}}
<br>
-----------分割线--------------------
<br>
<vue3Child :childData="childData" @setParentData="setParentData"></vue3Child>
</div>
`,
components: {
vue3Child
},
setup(props,context){
//data
const data = reactive({
name:'我是父级数据'
})
let getChildData = ref('')
const childData = ref("我是父组件传给子组件的数据")
//methods
const setParentData = (data) => {
console.log("子组件emit的方法,带过来数据为：",data);
getChildData.value = data // 修改ref数据，需要加上.value
}
return{
data,
childData,
getChildData,
setParentData
}
}
}
/**
* 创建一个应用实例,并且挂载到app上
* #app 节点下的原有的内容 会被全部销毁
* */
const app = createApp(vue3Parent).mount("#app")
</script>
vue3 随笔（未完结）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 网易财经8月1日讯 截至午盘，北京文化涨8.36%，报17.88元。成交额8.40亿，换手率12.31%。 北京文...
