vue use typescript, three things by value

Vue 2.0 typescript written by value:

With more and more attention typescript front end of the frame, using vue + typescript recently did a project. I found written with vue + js completely different. But the same principle. Next to introduce by value Vue common development.

Vue three commonly used by value are:

• Father to son
• Parent child transmission
• Non-traditional values ​​and his son

Official website quoted sentence: parent-child relationship can be summarized as a prop assembly passed down, the event passed up. Deliver data to a parent element via prop subassembly, the subassembly sends a message to the parent component by an event, as shown below:

 

 

 

Next, we look through the examples may better understand some of them:

 

1. The value of the parent element passaged subassembly

 

Parent component

 

// parent component
    <template>
        <div class="index">
            <div>父组件: <input type="text" v-model="value"></div>
            <! - introduced subassembly ->
            <About :value="value"/>
        </div>
    </template>
    <script lang="tsx" type="text/tsx">
        import {Component, Prop, Vue} from "vue-property-decorator";
        import About from "@/views/About.vue";
        
        @Component({ // 引入子组件 
            components: {
                About
            }
        })
        export default class HelloWorld extends Vue {
            value: string = "我是父组件哦";
            created() {
            }
        }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="scss"></style>

 

子组件

// 子组件
<template>
  <div class="about">
    子组件：<span>{{value}}</span>
  </div>
</template>
<script lang="tsx" type="text/tsx">
    import {Component, Prop, Vue} from "vue-property-decorator";
    @Component
    export default class About extends Vue {
        // 接受父组件的值
        @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        })  value !: string;

        created() {}
    }
</script>

 

2. 子组件向父组件传值

 

 

 

父组件

 

.	

// 父组件
    <template>
        <div class="index">
            <div>父组件：{{msg}}</div>
            <!--bindSend 为子组件 @Emit('bingSend') 里面绑定的事件-->
            <About @bindSend="propMsg"/>
        </div>
    </template>
    
    <script lang="tsx" type="text/tsx">
        import {Component, Vue} from "vue-property-decorator";
        import About from "@/views/About.vue";
        @Component({
            components: {
                About
            }
        })
        export default class HelloWorld extends Vue {
            msg: string = '';
            created() {};
            // 接收子组件发送数据是 触发的事件
            propMsg(msg: string){
               this.msg = msg;
            }
        }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="scss"></style>

 

子组件

// 子组件
    <template>
      <div class="about">
        子组件：我的子组件的数据 <button @click="propMsg">点击给父组件发送数据</button>
      </div>
    </template>
    
    <script lang="tsx" type="text/tsx">
        import {Component, Emit, Vue} from "vue-property-decorator";
        @Component
        export default class About extends Vue {
            msg: string = '子组件的msg数据';
            // bindSend 为父组件引用子组件上 绑定的事件名称
            @Emit('bindSend') send(msg: string){}; // send 处理给父组件传值的逻辑
            created() {}
            // 通过触发这个事件来处理发送的内容数据的逻辑，然后执行 @Emit() 定义的 sen(msg: string){} 事件
            propMsg(){
                this.msg = '子组件的msg数据,被传给了父组件';
                this.send(this.msg)
            }
    
        }
    </script>

 

3. 兄弟组件向传值

这里我们实现的思路是： （1）其中一个兄弟组件向父组件发送数据； （2）然后父组件再向另一个兄弟组件传值；

Author: extraordinary love
link: https: //juejin.im/post/5c55156f6fb9a049ef270541
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.