vue组件传值

最新推荐文章于 2024-09-30 22:04:51 发布

不会代码的鬼鬼

最新推荐文章于 2024-09-30 22:04:51 发布

阅读量92

点赞数

分类专栏：知识点初学者文章标签： vue.js javascript

本文链接：https://blog.csdn.net/guigui0822/article/details/120348573

版权

知识点同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

初学者

6 篇文章 0 订阅

订阅专栏

子组件和父组件都不能直接使用对方里的数据
vue模板里只能使用自己数据 data

props属性自定义组件的属性可以写到组件的开始标签里面主要用来接收父组件传过来的变量可以穿基本数据类型数组对象函数

父组件传给子组件必要条件
1.子组件必须在props里面加收到传值名字
2:父组件的模板中使用子组件必须通过属性传值(v-bind)

  <div id="app">
        <input type="text" v-model="msg" />
        <h1>{{msg}}</h1>
        <guigui-A str="自定义属性" :str2="msg"></guigui-A>
    </div>
    
     Vue.component("guiguiA", {
        //pros 属性自定义组件的属性 可以写到组建的开始标签里面
        props: ["str",'str2'],

    
        template: `
        <div>
            <p>子组件的数据--{{zimsg}}</p>
            <p>自定义的属性:{{str}}</p>
            <p>{{str2}}</p>
            </div>

2.子组件向父组件传值$emit

子组件:

 <span>{{childValue}}</span>

 <!-- 定义一个子组件传值的方法 -->

  <input type="button" value="点击触发" @click="childClick">


 export default {
  data () {
   return {
    childValue: '我是子组件的数据'

   }

  },

  methods: {
   childClick () {  

    this.$emit('childByValue', this.childValue)

   }

  }

 }

兄弟组件传值
创建一个空的vue实例，作为事件总线

   var test = new Vue()

通过test的$on()方法去监听兄弟节点发射过来的事件 $on有两个参数，一个是事件名称，一个是函数，该函数的默认值是传递过来的数据

test.$on('tellName', data => {
                            this.mysisterName = data
                        })

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/vue2.js"></script>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script>
        //创建一个空的vue实例，作为事件总线
        var test = new Vue()
        Vue.component('father', {
            template: `<div>
                  <son></son>
                  <daughter></daughter>
                </div>`,
            components: {
                son: {
                    template: `<div>我妹妹告诉我她叫{{mysisterName}}</div>`,
                    data() {
                        return {
                            mysisterName: '?'
                        }
                    },
                    mounted() {
                        //通过test的$on()方法去监听兄弟节点发射过来的事件
                        //$on有两个参数，一个是事件名称，一个是函数，该函数的默认值是传递过来的数据
                        test.$on('tellName', data => {
                            this.mysisterName = data
                        })
                    }
                },
                daughter: {
                    template: `<button @click='tellName'>点击就告诉哥哥我叫{{myName}}</button>`,
                    data() {
                        return {
                            myName: '萍萍'
                        }
                    },
                    methods: {
                        tellName() {
                            test.$emit('tellName', this.myName)
                        }
                    }
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>

</html>