【父子组件传值】/ 上一篇的代码补充

最新推荐文章于 2023-06-11 15:34:02 发布

StrongerIrene

最新推荐文章于 2023-06-11 15:34:02 发布

阅读量147

点赞数

分类专栏： # 前端 2020

本文链接：https://blog.csdn.net/StrongerIrene/article/details/103035467

版权

前端 2020 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

哎我真是高看自己了

copy来copy去写了一个css的布局然后光说不练的看了几天视频就以为自己什么都会了然后放羊

其实呢-。- 万丈高楼平地起啊，根本自己写不下去，不练习自己也不care的话真是等于0 了

比如父子组件传值我1不会写 2 写过没存代码存了理论忘了 3 全网找不到验证过的能用的代码 4 人很生气进度也超慢

今天boss开会的时候说 “ 我在这给你们开个会一万没了你觉得呢”

“但是整个组方向错了那没的是十万还要多”

enqwq 白看真的没用对我

下面存几个链接我也没实践

这个组件写完之后好好的整理一下(去博客园整理 csdn太水了点) 不能让博客没用了

1 https://blog.csdn.net/qq_40190624/article/details/90897949 父子传值

2 子向父传值这个是可以用的 https://blog.csdn.net/qq_43642812/article/details/89492130

3 导航栏bug解决。没基础还是不要看好吧！https://blog.csdn.net/wang1006008051/article/details/78686451

4 https://juejin.im/post/5d705e166fb9a06ae372805e 看起来easy 不知道行不行

5 其他 https://www.zhihu.com/question/24696662

https://www.zhihu.com/question/30903863

这里补充一下代码吧

4-5 父子组件

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="root">
    <child content='Dell'></child>
    <child content='Lee'></child>
  </div>
</body>
<script>
  Vue.prototype.bus = new Vue()

  Vue.component('child', {
    data: function () {
      return {
        selfContent: this.content
      }
    },
    props: {
      content: String
    },
    template:
      '<div @click="handleClick">{{selfContent}}</div>',
    methods: {
      handleClick: function () {
        this.bus.$emit('change', this.selfContent)
      }
    },
    mounted: function () {
      var this_ = this;
      this.bus.$on('change', function (msg) {
        this_.selfContent = msg
      })
    },
  })

  var vm = new Vue({
    el: '#root',
  })
</script>

</html>

4-6 组件插槽

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>组件插槽 qwq</title>
</head>

<body>
  <div id="root">
    <child>
            <div class='footer' slot="111" >我是foot 哦哦哦</div>
    </child>
  </div>
</body>
<script>
 
  Vue.component('child',{
    template:
    `<div>
      <slot name="222">
          <h1>default header</h1>
      </slot>
      <p>hello</p>
      <slot name="111">看我看我</slot>
    </div>`,
    props:['content'],
  })
  
  var vm = new Vue({
    el: '#root',
  })
</script>

</html>

4-7 作用域插槽

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>作用域</title>
</head>

<body>
  <div id="root">
    <child>
      <template slot-scope='props'>
        <li>{{props.itemmmmm}}</li>
      </template>
    </child>
  </div>
</body>
<script>
 
  Vue.component('child',{
    data: function(){
      return {
        list: [1,2,3,4]
      }
    },
    template:
    `<div>child
      <ul>
        <slot v-for="item in list"
          :itemmmmm=item>
        </slot>
      </ul>
    </div>`,
  })
  
  var vm = new Vue({
    el: '#root',
  })
</script>

</html>

4-8 动态指令和v-once

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>作用域</title>
</head>

<body>
  <div id="root">
    <component :is="typeeeee"></component>

    <child-one  v-if="typeeeee==='child-one'"></child-one>
    <child-two  v-if="typeeeee==='child-two'"></child-two>
    <button @click="handleBtnClick">change</button>
  </div>
</body>
<script>
 
  Vue.component('child-one',{
   template:'<div>child----one</div>'
  })

  Vue.component('child-two',{
   template:'<div>child----two</div>'
  })


  var vm = new Vue({
    el: '#root',
    data:{
      typeeeee:'child-one'
    },
    methods:{
      handleBtnClick: function(){
        this.typeeeee = (this.typeeeee==='child-one'? 'child-two':'child-one');
      },
    },

  })
</script>

</html>