Vue 父子传值 与 子父传值

利用props父子传值

<div id="app">
父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

<com1 v-bind:parentmsg="msg"></com1>

</div>
<script>
创建 Vue 实例，得到 ViewModel

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123 啊-父组件中的数据'
  },
  methods: {},
  components: {
  *结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法*
    com1: {
      data() { 
      **注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；**
         *data 上的数据，都是可读可写的；*
        return {
          title: '123',
          content: 'qqq',
          **简单数据类型这样就可修改传过来的值**
           forSon: this.parentmsg,
           
           **复杂数据类型更改的话，会和父元素的data数据一起更改，因为引用的是一个内存地址 ，使用数据深拷贝可以实现更改数据不影响父级数据**
           foruser:JSON.parse(JSON.stringify(this.parentuser))
        }
      },
      template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
    *注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的*
      *props 中的数据，都是只读的，无法重新赋值*
      props: ['parentmsg'], 
      *把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据*
      directives: {},
      filters: {},
      components: {},
      methods: {
        change() {
          this.parentmsg = '被修改了'
        }
      }
    }
  }
});

</script>

可定义传过来的值的规则validator

props: {
        toWord:{
            type:String,
            default:'',
            validator (value) {
                return value && ['ree','ooo'].indexOf(value) >= 0
            }
        }
    },

利用$emit子父传值

//子组件
<div id="app">
<template id="tmpl">

<div>
  <h1>这是 子组件</h1>
  <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
</div>

</template>

<script>

  methods: {
    myclick() {
      // this.$emit('func123', 123, 456)
      this.$emit('func', this.sonmsg)
    }
  }
}

//父组件
<div>

 <com2 @func="show"></com2>

</div>

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    datamsgFormSon: null
  },
  methods: {
    show(data) {
      // console.log('调用了父组件身上的 show 方法: --- ' + data)
      // console.log(data);
      this.datamsgFormSon = data
    }
  },

  components: {
    com2
    // com2: com2
  }
});

</script>
</body>

这⾥还有另⼀种⽅法，直接在⽗级声明，但为了区分原⽣事件和⾃定义事件，要⽤到事件修饰符 .native，
直接在父组件中调用子组件的方法

<com2 @click="myclick"></com2>

provide / inject实现父子传值

在一个祖先组件中 传递一个数据 让所有的子孙后代组件共享 可以隔代传递

 **provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
    这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。**
    

  // A.vue 

export default { 

 provide: { 

 name: 'Aresn' 

 } 

 } 

// B.vue

 export default {

inject: ['name'], 

mounted () { console.log(this.name); // Aresn 

} }

代替vuex

我们把整个 app.vue 的实例 this 对外提供，命名为 app（这个名字可以⾃定义，推荐使⽤ app，使⽤这个名字后，⼦组 件不能再使⽤它作为局部属性）。接下来，任何组件（或路由）只要 通过 inject 注⼊ app.vue 的 app 的话，都可以直接通过 this.app.xxx 来访问 app.vue 的 data、computed、methods 等 内容。
app.vue 是整个项⽬第⼀个被渲染的组件，⽽且只会渲染⼀次（即 使切换路由，app.vue 也不会被再次渲染），利⽤这个特性，很适 合做⼀次性全局的状态数据管理，例如，我们将⽤户的登录信息保存 起来：

<script>

export default {

 provide() {

 return { app: this }

 },

 data() {

 return { userInfo: null }

 },

 methods: {

 getUserInfo() {

 $.ajax('/user/info', (data) => {

 this.userInfo = data

 })

 },

 },

 mounted() {

 this.getUserInfo()

 },

}

</script>

*这样，任何⻚⾯或组件，只要通过 inject 注⼊ app 后，就可以直
接访问 userInfo 的数据了，⽐如：*

<template>

 <div>{{ app.userInfo }}</div>

</template>

<script>

export default { inject: ['app'] }

</script>

修改了个⼈资料，这时⼀开始在 app.vue ⾥获取的 userInfo 已经不是最新的了，需要重新获取。可以这样使⽤

<template>

 <div>{{ app.userInfo }}</div>

</template>

<script>

export default {

 inject: ['app'],

 methods: {

 changeUserInfo() {

 $.ajax('/user/update', () => {
// 直接通过 this.app 就可以调⽤ app.vue ⾥ 的⽅法
 this.app.getUserInfo()

 })

 },

 },

}

</script>

利用$hrefs实现子父传值

在组件中 可以给组件的成员(元素，子组件)上添加 ref 来获得组件中的成员
这样可以在父组件中直接获取添加了ref属性的 子组件的对象 从而可以直接点出 子组件上的data数据与methods
也可以获取到添加了ref属性的元素对象

<div id="app">

<input type="button" value="获取元素" @click="getElement" ref="mybtn">
<h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>
<hr>
<login ref="mylogin"></login>

</div>
<script>

var login = {
  template: '<h1>登录组件</h1>',
  data() {
    return {
      msg: 'son msg'
    }
  },
  methods: {
    show() {
      console.log('调用了子组件的方法')
    }
  }
}

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {},
  methods: {
    getElement() {
      // console.log(document.getElementById('myh3').innerText)
      **this.$refs 来获取元素和组件**
    **ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError**
      // console.log(this.$refs.myh3.innerText)

      // console.log(this.$refs.mylogin.msg)
      // this.$refs.mylogin.show()
    }
  },
  components: {
    login
  }
});

</script>

利用$parent父子传值 与利用$children子父传值

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

    <div id="app">
        <h1>{{msg}}</h1>
        <com1></com1>
        <com2></com2>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                  msg:'我是父组件中的数据',
            },
            mounted(){
                this.$children.forEach(item=>{
                    console.log(item.name)
                })
            },
            components:{
                com1:{
                    data(){
                     return{
                              name:'我是1',
                              title:'我是1号组件'
                        }
                    },
                    template:'<h1>{{title}}===={{$parent.msg}}</h1>'
                },
                com2:{
                    data(){
                        return{
                            name:'我是2',
                            age:18
                        }
                        
                    },
                    template: '<h1>{{age}}==={{$parent.msg}}</h1>'
                }

            }
        })
    </script>