父子组件传值

在父组件中改变子组件里的数据

ref属性应用和传值

父组件

<template>
  <div class="ctn">
    <input type="text" value="ref的用处" ref="input1" />
    <button @click="add()">改变数据</button>

    <!-- 2，添加ref属性放在组件上，可以获取子组件的所有方法 和数据-->
    <Ref1 ref="childComp"></Ref1>
  </div>
</template>
<script>
import Ref1 from "./ref1";
export default {
  components: {
    Ref1,
  },
  data() {
    return {
      fuVal: "父组件的值1",
    };
  },
  mounted: function() {
    console.log("获取子组件的数据", this.$refs.childComp.childval0);
    console.log("获取子组件的方法", this.$refs.childComp.getList);
    // 向子组件传值
    this.$refs.childComp.getList(this.fuVal);
  },
  methods: {
    add() {
      // 1，通过ref获取dom元素，改变dom
      this.$refs.input1.value = 22;
      this.$refs.input1.style.color = "blue";

        // 更新子组件的值，或调用子组件的方法
    //   this.$refs.childComp.childval0 = '新69';
    },
  },
};
// ref 需要在dom已经渲染完成后才会有，在使用的时候确保dom已经渲染完成。
// 比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
</script>

子组件

<template>
  <div>
    <div class="box" ref="boxRef">{{ name }}</div>
    <p>改变子组件的值：{{childval0}}</p>
    <div>父组件传的值：{{ fuVal }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      childval0: "68",
      name: "小小妹",
      fuVal: "",
    };
  },
  methods: {
    newName() {
      // 修改数据之后使用这个方法，获取更新后的 DOM
      this.$nextTick(() => {
        console.log(this.$refs.boxRef.textContent);
      });
    },
    // 父组件传的值
    getList(val) {
      this.fuVal = val;
    },
  },
};
</script>

 ref的基本应用：

 

 

一、父组件向子组件传递数据

在 Vue 中，可以使用 props 向子组件传递数据。

 父组件部分：使用 v-bind 将值绑定上

<template>
    <div class="ctn">
        <div>
            <div>
                父传子： <input type="text" v-model="inputval">
            </div>
            <Zizujian :inputName="inputval" ></Zizujian>
        </div>
    </div>
</template>
<script>
import Zizujian from '@/components/zizujian.vue'

export default {
    components:{
        Zizujian
    },
    data(){
        return{
            inputval:'',
        }
    },
    methods:{
 
    }
}
</script>

子组件部分：

<template>
    <div class="chir">
        <div>
            子组件接收： <p>{{inputName}}</p>
        </div>
    </div>
</template>
<script>

export default {
    components:{
    },
    // 接受父组件的值
    props: ['inputName'],
    // props:{
    //     inputName: String
    // },
    data(){
    },

}
</script>

从父组件接收值，就需要使用 props: ['inputName']

在 props 中添加了元素之后，就不需要在 data 中再添加变量了。

总结：在一个页面里，我们从服务器请求了很多数据，其中一些数据并不是页面的大组件来展示，而是让子组件来展示的。

所以需要父组件将数据传递给子组件（大组件请求数据，子组件用来展示）。

 

二、子组件向父组件传递数据

子组件主要通过事件 向父组件传递数据

1，子组件通过$emit()来触发事件

2，在父组件里，通过v-on自定义事件来监听

子组件部分：

<template>
    <div class="childr">
        <div>
            <span>子组件传值</span>
            <!-- 子传父的方法 -->
            <button @click="childClick()">点击事件</button>
        </div>
    </div>
</template>
<script>

export default {
    components:{
    },
    data(){
        return{
            childVal:'我是子组件的值001'
        }
    },
    methods:{
        childClick(){
            this.$emit('childValClick', this.childVal)
        }
    }
}
</script>

首先声明一个事件方法 ，在事件里使用 $emit 来定义一个  要传递的方法，并带上值。

父组件部分：

<template>
    <div class="ctn">
        <div>
            <span>子传父的值：{{childVal2}}</span>
             <ZiZuJian v-on:childValClick="childValClick"></ZiZuJian>

　　　　　　　　　　<!-- 或者 @childValClick="childValClick" -->

</div>
    </div>
</template>
<script>
import ZiZuJian from '@/components/zizujian.vue'

export default {
    components:{
        ZiZuJian
    },
    data(){
        return{
            childVal2:''
        }
    },
    methods:{
        // 子组件传值
        childValClick(val){
            this.childVal2 = val;
        }
    }
}
</script>

 在父组件中，声明一个方法childValClick，获取子组件传递的参数


总结：我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件，

　　　这样，就需要把子组件的值传递给父组件 。