Vue之父子模块值传递

Vue之父子模块值传递

• 父模块向子模块传递数据

//父模块
<template>
  <div id="app">
    <!--引入标签的作用域 可以为单/双标签 " : "符号为传递除了String类型的参数 -->
    <HelloWorld :user-name="name" :pass="pass" :login="login"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components: {  /*定义组件多个以,分割*/
    HelloWorld
  },
    /*定义数据*/
    data(){
      return{
         name: ['父向子组件', '传递'],
         pass: '数据测试',
         login: 123,
      }
    }
}
</script>

子模块
<template>
  <!--根标签只有一个 否则报错-->
  <div>
    <span v-for="item in userName">
      {{item}}：<input type="text"/><br/>
    </span>
    {{pass}}：<input type="text"/>
    <input type="button" :value="login"/> //标签中获取参数值需前面加:
  </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        props: {
            userName: Array,
            pass: String,
            login: {
                type: Number, //参数类型 String、Number、Boolean、Array、Object、Date、Function、Symbol
                default: "0", // 参数不传时的默认值
                required: false, //是否为必填，必填不填控制台报错
                validator: function (value) {  // 自定义参数校验
                    return value <= 0
                }
            },
        }
    }
</script>
<style scoped> /*scoped ：表名该样式只能在本页面使用*/
  /* css 样式*/
</style>

• 子模块向父模块传递数据

子模块
<template>
    <div>
      <span>{{msg}}</span>
      <input type="button" value="触发" @click="uptoParent">
    </div>
</template>
<script>
    export default {
        name: "test",
        data(){
            return {
                msg:"你好,这是test组件",
                childValue:'子向父传递的数据',
            }
        },
        methods:{
            uptoParent(){
                this.$emit('childByValue', this.childValue)
            }
        }
    }
</script>

父组件
<template>
  <div>
    <test v-on:childByValue="childByValue"/>
    <input :value="childValue">
  </div>
</template>
<script>
    import Test from "./test"; /*引入组件*/
    export default {
        name: 'HelloWorld',
        components: {Test},
        data(){
            return {
                childValue:'',
            }
        },
        methods: {
            childByValue: function (childValue) {
                // childValue就是子组件传过来的值
                console.log(childValue);
                this.childValue = childValue
            }
        }
    }
</script>