父子间传值

最新推荐文章于 2023-07-14 22:09:34 发布

Almee211

最新推荐文章于 2023-07-14 22:09:34 发布

阅读量1.6k

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/Almee211/article/details/120937966

版权

1、全局组件

全局组件

注册全局组件： Vue.component('组件名',{template:"标签模板"})

全局组件可以在不同的实例中使用

注意：组件名如果是驼峰写法使用时必须 global-child 格式

注意：模板标签必须有一个根标签

组件中的数据必须是函数返回形式

组件中也可以添加事件 @click='handleClick'

局部组件

注意：只能在当前的组件实例对象中使用

注意：组件名如果是驼峰写法使用时必须 global - child 格式

注意：模板标签必须有一个跟标签

组件中的数据必须是函数返回形式

组件中也可以添加事件 @click='handleClick'

<body>
  <div id="app">
    <p>{{msg}}</p>
    <!-- 使用全局组件 -->
    <global-child></global-child>
    <!-- 使用局部组件 -->
    <part-child></part-child>
</div>
<div id="app1">
    <!-- 使用全局组件 -->
    <global-child></global-child>
    <!-- 不能使用局部组件，没有注册 -->
    <!-- <part-child></part-child> -->
</div>
</body>
<script>
Vue.component('globalChild',{
  template:`<div @click='handleClick' style='display:flex' ><p>我是全局组件</p><p>奋斗的青春{{name}}</p></div>`,
  data:function(){
    return{
      name:'如今我是造梦的人啊'
    }
  },
  methods: {
    handleClick(){
      console.log('怅然若失流连忘返啊');
    }
  },
})
const vm = new Vue({
  el:'#app',
  data:{
    msg:'在这之前 别说再见',
  },
  components:{
    partChild:{
      template:`<p>我是局部组件---{{partname}}</p>`,
      data(){
        return {
          partname:'林晓峰'
        }
      }
    }
  }
})
const vm1 = new Vue({
  el:'#app1',
  data:{
    msg:'轻松一下'
  }
})
</script>

运行结果：

组件嵌套：

<body>
  <div id="app">
    <p>{{msg}}</p>
    <!-- 使用全局组件 -->
    <global-child></global-child>
    <!-- 使用局部组件 -->
    <part-child></part-child>
</div>
</body>
<script>
Vue.component('globalChild',{
  template: `<div @click='handleClick' style='display:flex' ><p>我是全局组件</p><p>奋斗的青春{{name}}</p></div>`,
  data:function(){
    return {
      name:'cancel false cancel right'
    }
  },
  methods: {
    handleClick(){
      console.log('fill in be careful')
    }
  },
})
const vm = new Vue({
  el:'#app',
  data:{
    msg:'Lynchpin what is lynchpin'
  },
  components:{
    partChild: {
                // 局部组件里面嵌套了全局组件
                template: `<p>我是局部组件---{{partname}}-- <global-child></global-child></p>`,
                data() {// 组件数据写法
                    return {
                        partname: "jerry"
                    }
                }
            }
  }
})
</script>

运行结果：

父传子

组件使用的时候，单双标签都可以

父传子方法1

1.先给子组件设置一个属性 :tit='msg'

2.在子组件中使用props:["tit"] 接受传过来的属性

3.该属性就是传过来的数据

4.在子组件中传过来的属性和data中的数据使用方法一样

父传子方法2

1.先给子组件设置一个属性 :tit='msg'

2.子组件使用props:{tit:{default:456,type:Number}} 对象形式

3.default 表示默认值，及如果没有传过来属性，我就使用默认值

4.type 表示数据类型。对父组件传过来的数据类型做校验

5.type 和default 可以省略

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{msg}}</p>
    <!-- 给子组件设置一个自定义属性 -->
    <globalchild :tit = 'msg' aa='100'/>
  </div>
</body>
<script>
Vue.component('globalchild',{
  template:`<p>我是全局组件--{{name}}---{{tit}}----{{aa}}</p>`,
  data(){
    return {
      name:'全局组件'
    }
  },
  props:{
    tit:{
      default:'456',//默认值
      type:String
    },
    aa:{}
  },
  created() {
    console.log('tit',this)//this 为子组件的实例对象
    console.log(this.tit);//123
    console.log(this.name);//全局组件
  },
})
const vm = new Vue({
  el:'#app',
  data:{
    msg:'123'
  },
  created(){
    console.log(1,this);//this为vm实例
  }
})
</script>
</html>

运行结果：

子传父

子传父步骤：通过事件进行传参

第一步：给子组件绑定事件 @click='emitFn'

第二步：在子组件事件函数中执行 this.$emit('自定义事件'，数据)

第三步：在父组件上接受传过来的事件

第四步：在父组件的methods 中定义该事件对应的执行函数getData

第五步：getData（m）中的形参就是传过来的数据

<body>
  <div id="app">
    <ul>
      <li v-for='item in boys' :key='item.id'>{{item.name}}</li>
    </ul>
    <partchild @transfer='getData' />
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '赵文卓',
      boys: [
        {
          id: 0,
          name: '热狗'
        },
        {
          id: 1,
          name: '尹正'
        }
      ]
    },
    methods: {
      getData(m) {
        console.log(m)
        this.boys = m
      }
    },
    components: {
      partchild: {
        template: `<p @click='emitFn'>我是局部组件---{{name}}</p>`,
        data: function () {
          return {
            name: '张晋',
            members: [
              {
                id: 0,
                name: '高瀚宇'
              },
              {
                id: 1,
                name: '白举纲'
              }
            ]
          }
        },
        methods: {
          emitFn() {
            console.log('你点的是子组件');
            console.log(this);//this是子组件的vue实例
            this.$emit('transfer', this.members)
          }
        }
      }
    }
  })
</script>

子传父方法----ref

ref 如果给普通标签添加获取后是标签dom 节点

ref 放在子组件上，获取的是当前子组件实例对象

总结： ref 方式简单粗暴

给子组件设置ref 获取了该子组件的实例对象

<body>
  <div id="app">
    <p ref="p1">{{msg}}</p>
    <partchild ref="c"></partchild>
    <ul>
      <li v-for='(item,index) in fatherArr' :key='index'>
        {{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '李承铉',
      fatherArr: []
    },
    mounted() {
      console.log(this.$refs.p1)//<p>XXX</p>
      console.log(this.$refs.c.childarr);//childarr数组内容
      this.fatherArr = this.$refs.c.childarr
    },
    components: {
      partchild: {
        template: `<p>我是局部子组件</p>`,
        data: function () {
          return {
            childarr: [
              {
                id: 0,
                name: '李珠衔'
              },
              {
                id: 1,
                name: '张淇'
              }
            ]
          }
        }
      }
    }
  })
</script>

运行结果:

Almee211

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
父子间传值

1、全局组件全局组件注册全局组件： Vue.component('组件名',{template:"标签模板"}) 全局组件可以在不同的实例中使用注意：组件名如果是驼峰写法使用时必须 global-child 格式注意：模板标签必须有一个根标签组件中的数据必须是函数返回形式组件中也可以添加事件 @click='handleClick'局部组件注意：只能在当前的组件实例对象中使用注意：组件名如果是驼峰写法...
复制链接

扫一扫