VUE3.0 简单父子通信demo

最新推荐文章于 2024-06-03 22:04:47 发布

大西瓜-dxg

最新推荐文章于 2024-06-03 22:04:47 发布

阅读量401

点赞数

文章标签： vue js vue.js

本文链接：https://blog.csdn.net/weixin_45514326/article/details/109674021

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
        我是父组件的名字 ：{{ object.parentTitle }}
        <button  @click='Todo' >点击我会改变子组件的值</button> 
      <child  :datas='count.value' v-model:childata="object.parentTitle"/>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script >
    const { createApp,ref,h,reactive,watchEffect } = Vue
    // 子组件
    var  child = {
       props: {
        datas: Number,
      },
      template:`<div>
       <br/>
        <button  @click='change' >点击我改变父组件标题名字</button>
        </div>
        `,
      setup(props,ctx) {
        const title = ref(0)
        watchEffect(() => {
         console.log(`name is: ` + props.datas)
         title.value=props.datas
       })
       let change=()=>{
          ctx.emit("update:childata",title.value+'父组件的标题');
        }
      // 对象 + 字符||数组  就是参数 与 子元素
      //  return () => h('h3',`  <button> 点击我</button> `)
      return{
        change,
        title
      }
     },
    }
    // 父组件
    const  A = {
      components:{
        child:child
    },   
      setup() {
      const count = reactive({ value: 0 })
      const Todo = () => {
        count.value++
       }
      console.log(count.value,'count')
      const object = reactive({ parentTitle: 'bar' })
      return{
        Todo,
        count,
        object,
      }
     },
    }
    createApp(A).mount('#app')
  </script>
</body>
</html>

在这里插入图片描述

大西瓜-dxg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
VUE3.0 简单父子通信demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app">
复制链接

扫一扫