P23. vue3 setup 生命周期,props, context, provide-inject

setup 生命周期

• App.vue

<script>
import { onBeforeUpdate,onBeforeUnmount,onBeforeMount,onMounted } from "vue";

export default {
  data() {
    return {
      message: 'hello6666666666666'
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    onBeforeMount(()=>{
      console.log('onBeforeMount');
    })
    onMounted(()=>{
      console.log('onMounted');
    })

    return {  }
  },
  //选项式api
  computed:{
  },

  methods:{
  },
  components:{
    //Hello
  }
}

</script>

<template>
  <div>




  </div>

</template>

setup props

• App.vue

<script>
import { onBeforeUpdate,onBeforeUnmount,onBeforeMount,onMounted } from "vue";
import Content from "./components/Content.vue";

export default {
  data() {
    return {
      message: 'hello6666666666666'
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    onBeforeMount(()=>{
      console.log('onBeforeMount');
    })
    onMounted(()=>{
      console.log('onMounted');
    })

    return {  }
  },
  //选项式api
  computed:{
  },

  methods:{
  },
  components:{
    Content
  }
}

</script>

<template>
  <div>
    <Content/>

  </div>

</template>

• Content.vue

<script>
import { onBeforeUpdate,onBeforeUnmount,onBeforeMount,onMounted } from "vue";
import Content from "./components/Content.vue";

export default {
  data() {
    return {
      message: 'hello6666666666666'
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    onBeforeMount(()=>{
      console.log('onBeforeMount');
    })
    onMounted(()=>{
      console.log('onMounted');
    })

    return {  }
  },
  //选项式api
  computed:{
  },

  methods:{
  },
  components:{
    Content
  }
}

</script>

<template>
  <div>
    <Content/>

  </div>

</template>

context

• App.vue

<script>
import { onBeforeUpdate,onBeforeUnmount,onBeforeMount,onMounted } from "vue";
import Content from "./components/Content.vue";

export default {
  data() {
    return {
      message: 'hello6666666666666'
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    onBeforeMount(()=>{
      console.log('onBeforeMount');
    })
    onMounted(()=>{
      console.log('onMounted');
    })

    return {  }
  },
  //选项式api
  computed:{
  },

  methods:{
    injectCounter(value){
      console.log(value);
    }
  },
  components:{
    Content
  }
}

</script>

<template>
  <div>
    <Content class="box" id="content" @injectCounter="injectCounter"/>


  </div>

</template>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <h2>组件内容</h2>
    <button @click="sendeParent"> 发送数据 </button>

  </div>
</template>


<script>
import { onUpdated, toRefs, ref} from "vue";

export default {
  data(){
    return{
      a: 10,
    };
  },
  props:{
    message: {
      type: String,
      default: '你好酷狗',
    },
  },
  setup(props, context) {
    const counter=ref(20)
    function sendeParent() {
      context.emit('injectCounter', counter.value)
    }
    console.log(context.attrs);
    return {sendeParent}
  },
  components:{

  },
  methods:{

  },
  name: "Content"
}
</script>

<style scoped>

</style>

provide

• App.vue

<script>
import { onBeforeUpdate,onBeforeUnmount,onBeforeMount,onMounted, ref, provide } from "vue";
import Content from "./components/Content.vue";

export default {
  data() {
    return {
      message: 'hello6666666666666'
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    provide('name', 'sean')

    return {  }
  },
  //选项式api
  computed:{
  },

  methods:{
    injectCounter(value){
      console.log(value);
    }
  },
  components:{
    Content
  }
}

</script>

<template>
  <div>
    <Content class="box" id="content" @injectCounter="injectCounter"/>


  </div>

</template>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <h2>组件内容</h2>
    <h2>{{name}}</h2>

  </div>
</template>


<script>
import { onUpdated, toRefs, ref, h,inject } from "vue";

export default {
  data(){
    return{
      a: 10,
    };
  },
  props:{
    message: {
      type: String,
      default: '你好酷狗',
    },
  },
  setup() {
    const name= inject('name')
    return {name}
  },
  components:{

  },
  methods:{

  },
  name: "Content"
}
</script>

<style scoped>

</style>

• App.vue

<script>
import { onBeforeUpdate,onBeforeUnmount,onBeforeMount,onMounted, ref, provide } from "vue";
import Content from "./components/Content.vue";

export default {
  data() {
    return {
      message: 'hello6666666666666'
    };
  },

  setup(){//setup 组件被创建之前执行，不需要使用this
    const name=ref('sean')
    provide('name', name)
    function changeName(){
      name.value='tom'
    }

    return { changeName }
  },
  //选项式api
  computed:{
  },

  methods:{
    injectCounter(value){
      console.log(value);
    }
  },
  components:{
    Content
  }
}

</script>

<template>
  <div>
    <Content class="box" id="content" @injectCounter="injectCounter"/>
    <button @click="changeName">changeName</button>


  </div>

</template>

• Content.vue

<template>
  <div>
    <!--组件是可以复用 -->
    <h2>组件内容</h2>
    <h2>{{name}}</h2>

  </div>
</template>


<script>
import { onUpdated, toRefs, ref, h,inject } from "vue";

export default {
  data(){
    return{
      a: 10,
    };
  },
  props:{
    message: {
      type: String,
      default: '你好酷狗',
    },
  },
  setup() {
    const name= inject('name')
    return {name}
  },
  components:{

  },
  methods:{

  },
  name: "Content"
}
</script>

<style scoped>

</style>