vue 父子组件双向数据绑定，调用 使用ref获取原生DOM

父子组件之间双向数据绑定

1.父组件给子组件传参时：

在：自定义属性.sync=“传递过去的变量”自定义属性名后面加上.sync表示传递的是一个同步变量

父组件： app.vue: 点击button更改子组件msg数据

<div id="app">
    <h1>我是App父组件的内容</h1>
    <h1>父组件渲染自己的msg的值:{{msg}}</h1>
    <button @click="change">点我更改msg数据</button>
    <HelloWorld :msg.sync="msg" />
  </div>
  import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
     HelloWorld
  },
  data(){
    return{
      msg:"父组件的msg数据",
    }
  },
  methods:{
    change(){
      this.msg="新更改的值!"
    },

  }
}

2.子组件还是正常使用 props接收该变量

子组件： HelloWorld.vue:

<div class="hello">
      <h2>我是Hello子组件</h2>
    <h2>父组件的msg数据:{{msg}}</h2>
  </div>
  export default {
  props: {
      msg:{
        type:String,
        default:"我是msg默认值",
        required:false
      }
  },

3.子组件想要更改当前父组件传递多来的数据时使用：

this.$emit("update:传递多来的属性名"，新更改的值)

子组件： HelloWorld.vue: 点击子组件button更改父组件的数据

<div class="hello">
      <h2>我是Hello子组件</h2>
    <h2>父组件的msg数据:{{msg}}</h2
    <button @click="change">点我改变父组件传过来的数据</button>
  </div>
  export default {
  data(){
    return{
      hehe:"我是子组件的hehe数据"
    }
  },
	 methods:{
    change(){
      this.$emit("update:msg","子组件改的hehe")
    }
  }
  }

父组件直接相互直接调用(不常用)

1.父组件直接获取子组件对象：

父组件：this.$children[索引]

索引值按照父组件的template加载顺序 为索引值顺序

拿到子组件对象就可以直接调用子组件的methods函数或者修改 自组建的data的数据

this.$children[索引值].data里面的变量

this.$children[索引].methodes里面的方法名()

父组件： app.vue: 点击改变子组件数据

<div id="app">
    <h1>我是App父组件的内容</h1>
    <h1>父组件渲染自己的msg数据:{{parent_msg}}</h1>
    <button @click="change">点我直接更改子组件数据</button>
    <HelloWorld></HelloWorld>
</div>
  import HelloWorld from './components/HelloWorld.vue'
  export default {
  components: {
    HelloWorld
  },
  data(){
    return{
      parent_msg:"父组件的msg内容"
    }
  },
  methods:{
    change(){
		this.$children[0].child_msg="父组件给你改的新值"
    }
    }
  }

子组件： HelloWorld.vue

<div class="hello">
      <h2>我是Hello子组件</h2>
    <h2>渲染msg数据:{{child_msg}}</h2>
  </div>
  export default {
  data(){
    return{
      child_msg:"子组件的msg数据"
    }
  }
  }

2.子组件直接获取父组件对象

子组员：this.$parent

调用方法：

this.$parent.data变量/methods方法

子组件: Child.vue : 点击更改父组件数据

<div id="child">
        <h2>我是Child子组件</h2>
      <button @click="change">点我修改父组件的数据</button>
    </div>
export default {
  name: "Child",
  methods:{
    change(){
      // console.log(this.$parent);
      this.$parent.parent_msg="child子组件伸手改变的新值!"
    }
  }
}

父组件： app.vue:

<div id="app">
    <h1>我是App父组件的内容</h1>
    <h1>父组件渲染自己的msg数据:{{parent_msg}}</h1>
    <Child></Child>
  </div>

ref属性的使用

1可以获取原生DOM对象、

如果ref属性是定义在原生html标签上面 那么最终获取的就是原生DOM对象

2.可以获取子组件对象

如果ref属性是定义在自定义组件标签上面 那么最终获取的就是子组件的对象
<标签 ref="自定义名字"></标签>

获取方式：

this.$refs.ref定义的名字

<div id="app">
    <h1>我是App父组件的内容</h1>
    <input type="file" id="file" ref="file">
    <button @click="getFile">点击获取file控件的dom对象</button>
    <button @click="getChild">点击获取child子组件对象</button>
    <Child ref="child"></Child>
  </div>
  import Child from "@/components/Child";
  export default {
  components: {
   Child
  },
  methods:{
    getFile(){
      // let fileDom=document.getElementById("file");
      // console.log(fileDom) 同理
      console.log(this.$refs.file)
    },
    getChild(){
      console.log(this.$refs.child);
      //获取到的是子组件的对象
    }
  }
}