vue3之setup 函数基本使用

1参数介绍

使用 setup 函数时，它将接收两个参数：

11 props 可以获取 父组件传递过来的属性

12 context

2父子组件交互demo

与vue2的区别：子组件在setup函数中通过prop属性名获取父组件传递的参数，通过contextemit('自定义事件名'，参数)触发事件而不是this$emit。

21父组件

22子组件

下面接着看子组件通过thisprops事件名称 传值给父组件，父组件通过thisprops属性名 传值给子组件的例子

效果如下：

上面的navbar 和下面的tabbar分别是两个子组件，实现点击子组件，选项切换内部组件，点击center同时切换到center组件和高亮选择下班的tabbar的center选项

React组件间传递数据确比较恼火目前基本通props传递所必须buttonlistitem共父组件设置state再通传递父组件定义事件处理函数更新状态通状态更新触发组件更新……复杂看jsfiddle

最后给出另一个例子，试着理解它。

<template>

    <div id="child">

        <button @click="changeFu">子组件1改变父组件</button>

        <h1>子组件1的值：{{cmsg}}</h1>

        <ul>

            <li v-for="(item,i) in childList" :key="i" @click="changeList(i)">

                姓名：{{itemname}}

                年龄：{{itemage}}

            </li>

        </ul>

        <h2>汽车品牌：{{cobjcar}} 价格：{{cobjprice}}</h2>

        <h3>{{cfn()}}</h3>

    </div>

</template>

<script>

export default {

    / keep alive 判断需要用组件的name /

    / 递归组件自己调用自己 也需要使用name /

    / vue devtools 你看到组件名就是name值 /

    name:"child",

    / props接收值第一种方式 数组 数组里面是字符串类型的传过来的参数/

    / props:['cmsg'] /

    / props接收值第二种方式 对象 属性名是传过来的参数 属性值是规定的类型 /

    / props:{

        cmsg:String

    } /

    / props接收值第三种方式 对象里面再写对象 属性名是传过来的参数

    里面的对象 有规定类型 和 默认值 /

    / 默认值的意思是当你不传参数的时候默认显示的值 /

    props:{

        cmsg:{

            type:String,

            default:"默认值"

        },

        childList:{

            type:Array,

            default:()=>[]

        },

        cobj:{

            type:Object,

            / 这样写 会报错 因为默认导出一个对象，

            会把里面写的内容当成表达式并没有当成对象里面的key和value /

            / default:()=>{

                car:"大众",

                price:"10w"

            } /

            default:()=>{

                return {

                    car:"大众",

                    price:"10w"

                }

            }

        },

        cfn:{

            type:Function,

            default:()=>()=>{}

        }    

    },

    methods:{

        / vue中组件传值有个规定

        需要保持单向数据流

        父组件可以直接传给子组件

        子组件不可以直接修改父组件的值 /

        changeFu(){

            / 不可以 /

            / thiscmsg = '我以后工作在硅谷' /

            / 子组件传给父组件使用$emit /

            / this$emit(自定义的事件名,需要传给父组件的值) /

            this$emit('childChange','我以后工作在硅谷')

        },

        changeList(i){

            this$emit('childListC',i,'德利',89)

        }

    }

}

</script>

<style scoped>

/ style没有加上scoped的作用域的情况下，是全局的  /

/ scoped作用的就是防止自己写的样式 给全局带来污染 设置的作用域

加了scoped当前的样式 只对当前的组件管用 /

    / red{

        background:red;

    } /

</style>

<template>

<!--  template里面的内容 node会解析

/assets/logopng 这句话在node会当成普通的字符串

而编译后的开发环境是找不到对应的地址的 -->

 <!-- style="background:url(/assets/logopng)" -->

<!-- 解决方案需要使用node的require方法，把相对路径转成node解析后的地址 -->

<!-- 这个路径是脚手架 打包后的的地址

background: url("/img/logo82b9c7a5png") no-repeat;

是开发环境中打包编译出来的，实际上没有img这个文件 -->

<!-- :style="{background:'url('+imgurl+') no-repeat'}" -->

<!-- 在根路径下这样写是可以被识别的 -->

<!-- style="background:url(/images/logopng) no-repeat" -->

  <div id="child2">

      <!-- <h1

        class="red"

        :style="{background:`url(${img}) no-repeat`}"

      >child2</h1> -->

      <h1>子组件2的值：{{cmsg2}}</h1>

      <ul>

            <li v-for="(item,i) in childList" :key="i">

                姓名：{{itemname}}

                年龄：{{itemage}}

            </li>

        </ul>

  </div>

</template>

<script>

export default {

    name:"child2",

    props:['cmsg2','childList'],

    data(){

        return {

            / 根路径下的可以直接使用 /

            img:'/images/logopng',

            / 如果是src资源路径下的assets文件夹里面的必须使用require /

            imgurl:require('/assets/logopng')

        }

    }

}

</script>

<style scoped>

    h1{

        / width: 400px;

        height: 400px; /

        / 在style里面是不可以使用@ 只能使用相对路径或者根路径 /

        / background: url(/assets/logopng) no-repeat; /

        / background: url(/images/logopng) no-repeat; /

    }

</style>

<template>

  <div id="ChildNew">

    <h1 @click="changeTit">{{ctitlename}}</h1>

    <ul>

      <li v-for="(item, i) in cList" :key="i">

        姓名：{{ itemname }} 年龄：{{ itemage }}

        <button @click="del(i)">删除</button>

      </li>

    </ul>

    <button @click="dian">点我</button>

  </div>

</template>

<script>

export default {

  name: "ChildNew",

  / props:['cList'], /

  props: {

    cList: {

      type: Array,

      / 要求必须传参数，否则会给与vue警告 /

      required: true,

      / default: () => [{ name: "默认A", age: 100 }], /

    },

    ctitle:{

      type:Object,

      required:true

    }

  },

  data(){

    return {

      aa:"我被获取了",

      childA:"childA",

      busAVal:"我好辛苦的发送出去了"

    }

  },

  / 在vue3里面取消了created的钩子函数，但是mounted依然存在 /

  mounted(){

    / 通过父组件去传值 /

    this$emit('childAHandle',thischildA)

    / 在mounted里面涉及一个问题 组件加载的先后顺序问题

    B组件先加载了,但是A组件还没有发送，所以触发不了$on事件 /

    consolelog('我是组件1');

    / this$bus$emit('busAHandle',thisbusAVal) /

  },

  methods: {

    dian(){

      this$bus$emit('busAHandle',thisbusAVal)

    },

    changeTit(){

      / 不可以违反了单向数据流的原理 /

      / 必须通过$emit的形式去修改 /

     /  thisctitle = '子组件' /

      / this$emit('changett','子组件') /

      this$emit('update:ctitle',{name:"lisi"})

    },

    del(i) {

        this$emit('delItem',i)

    },

    toast(){

      alert('我被触发了')

    }

  },

};

</script>

<style scoped>

#ChildNew {

  text-align: center;

}

</style>

<template>

  <div id="ChildNew2">

      <h1>ChildNew2</h1>

      <h2>{{childval2}}</h2>

      <h2>{{msg}}</h2>

  </div>

</template>

<script>

export default {

    name:"ChildNew2",

    props:['childval2'],

    data(){

        return {

            msg:""

        }

    },

    created(){

        consolelog('我是组件2');

        / 先监听事件 再触发发送事件 /

        this$bus$on('busAHandle',(val)=>{

            consolelog(val)

            thismsg = val

        })

    },

    mounted() {

        / consolelog('我是组件2'); /

    },

}

</script>

<style scoped>

#ChildNew2{

    text-align: center;

}

</style>

以上就是关于vue3之setup 函数基本使用全部的内容，包括:vue3之setup 函数基本使用、react的子组件向父组件传值、React子组件取不到父组件的state的值，求解等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！