ip2region -- 查询IP地址

1. 使用props传递组件的值

  1.1 props:主要用于组件的传值，他的工作就是为了接收外面传过来的数据 

  1.2【定义被调用组件】组件名称：son.vue
  1.3 首先，我们先定义一个组件，用于显示个人信息的组件，我们放了一个人的姓名，性别，以及年龄，
  定义好这个组件之后，就可以等待其他组件进行调用。 为了让其它组件可以调用，我们就需要再定义一个props属性，
  用于接收别的组件传进来的值。

<template>
        <div >个人信息</div>
        <div>{{ name }}</div>
        <div>{{ age }}</div>
        <div>{{ sex }}</div>
</template>
        
  <script>
      export default {
        name: '',
        props:['name','age','sex']
      }
  </script>
    
  <style scoped>
  </style>


1.4 【调用组件】组件名称：father.vue
1.5 此时我们再定义一个组件，用于展示这个人的基本信息，进行对son.vue组价的调用实现信息的展示，

<template>
    <div >首页</div>
    // 3.使用组件，然后传入对应的参数
    <son name="小明" age='18' sex="男"></son>
</template>

<script>
    // 1.引入要导入的组件名称
    import son from './son.vue'
    export default {
        name: '',
        components:{
            son,  // 2.注册组件
        }
    }
</script>

<style scoped>
</style>

2.调用组件的方法

2.1 通过emits去声明要使用的事件
2.2 通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。

2.3 【定义被调用的组件】组件名称：methodsSon.vue

  <template>
    <button @click="emitEvent">点击我</button>
  </template>

  <script>

      export default {
        emits: ["my-event"], // 1.声明要使用的事件
        data() {
      
          return {
            msg: "我是子组件中的数据"
          }
      
      }, 

      methods: { 
             emitEvent() { 
          // 2.通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
                 this.$emit('my-event', this.msg
                 )
           },
      
          } }

  </script>


  2.4 【定义调用的组件】methodsFather.vue

 <template>
    <ChildA @my-event="getMyEvent"></ChildA>
    <!-- 3. 父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
  </template>
     
  <script>
  import ChildA from "./methodsSon.vue"

  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg) {
        console.log('接收的数据--------->' + msg)//接收的数据--------->我是子组件中的数据
      },


    }
  }
  </script>

3. 父子组件之间的调用 （更新版）

### 使用 this.$refs.child.方法名()  去调用子组件的方法
### 使用 this.$parent.方法名()   去调用父组件的方法
### 代码地址：
https://github.com/wwsit/python_files/tree/master/003_qianduan_files/005_vue%E5%AD%A6%E4%B9%A0/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E8%B0%83%E7%94%A8

### 父组件内容：
<template>

  <!-- 1.1 需要用到ref属性，给这个组件起个标识，叫child -->
  <ChildA ref="child"></ChildA>

  <button @click="useChildMethod">调用子组件</button>

</template>

<script>
import ChildA from "./son.vue"

export default {
  components: {
    ChildA
  },
  methods: {


    useChildMethod() {
      
      // 1.2 通过 this.$refs 去访问 child组件里面的内容
      this.$refs.child.Soninfo()
    },

    fatherinfo(){
      console.log("我是父组件。。。")
    }

  }
}
</script>


### 子组件内容

<template>
  <button @click="userFather">调用父组件</button>
</template>
<script>
export default {

  data() {

    return {
      msg: "我是子组件中的数据"
    }
  },
  methods: {
    
    Soninfo(){
      console.log('我被父组件调用了。。。')
    },


    userFather(){

      // 2.1 使用 this.$parent 就可以调用父组件的内容
      this.$parent.fatherinfo()
    }
  }
}
</script>

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。