|
先掰扯一下:
传值的值分为三种: 数据、方法、父组件本身
这个传值又叫 单向下行数据流 ; 传值的方式 又叫 单向下行绑定
顾名思义:就是说 我父组件可以打儿子, 儿子等着挨揍就行,儿子不能来打劳资 ; 【但是这种情况不是绝对的,比方说你考试不好劳资会生气】
好嘞,开始贴代码
先贴个 home.vue 的【就是父组件】- <template>
- <div id="home">
- <button @click="chan"> 点击切换触发生命周期 </button>
- <!-- 头部组件引入 -->
- 这是home组件 <span class="lmtest">测试值是否变色</span>
-
- {{todata}}------{{mvc}}
- <button @click="doone()">改变父组件的值 子组件的数据也会改变</button>
- <br>
- <button @click="dotwo()">改变子组件的值 父组件的数据也会改变</button>
- <!-- 但是这是单向的, 如果在子组件中 直接改变掉 父组件通讯过去的值,父组件内的值其实不变 -->
- <v-head v-if="b" :todata="todata" :dothree="dothree" :dofour="dofour" :home="this"></v-head>
- <!-- :home = "this" 表示把整个实例传递过去 -->
- </div>
- </template>
- <script>
- // 1.引入头部组件 【组件文件尽量放在 components/ 目录中,大写首字母的.vue文件 】
- // 2.注册组件 【 注意如果下面components内容为ES6 语法 则html 则写成对应的标签 】
- // 3.引入组件 【在页面中写入<v-head></v-head> 】
- import Head from "./Head.vue";
- export default {
- data() {
- return {
- b:false
- ,todata:'这是home组件的值'
- ,mvc:'溜溜留'
- };
- },
- methods: {
- chan(){
- if(this.b){
- this.b = false
- }else{
- this.b = true
- }
- }
- ,doone(){
- this.todata='哈哈哈哈哈哈哈哈哈哈哈哈 }
- ,dotwo(){
- alert(this.todata);
- }
- ,dothree(){
- alert('向子组件传递方法');
- }
- ,dofour(e){
- //在这测试我发现个本质,把这个方法传递给子组件时,其实 就是 子组件【触发】 父组件的方法
- // 在这里灵活应用 就可以 形成 子组件向 父组件传值
- this.mvc='哈哈哈'
- }
- },
- name: "app",
- components: { //这用于组件的注册,
- 'v-head':Head
- }
- ,mounted(){
- // alert('home挂载到demo后')
- }
-
- };
- </script>
- <style scoped>
- .lmtest {
- background: #000;
- color: #fff;
- }
- h2 {
- font: 10px;
- }
- </style>
复制代码
再贴个 head.vue的【就是子组件】- <template>
- <div id="head">
- <h2> 这是头部组件 </h2>
- 这是从父组件中接收到的值--------{{todata}}
- <hr>
- <button @click="dofour()">点我改变子组件的值</button>
- <button @click="dothree()">接收父组件传过来的方法</button>
- <button @click="abc()">接收传递过来的整个父组件实例</button>
- </div>
- </template>
- <script>
- export default {
- data(){
- return {
- f:'这是子组件'
- }
- }
- ,props:['todata','dothree','dofour', 'home'] //这个没有验证
- // ,props:{ // 验证版本, 也包括设置默认值
- // 'todata':String, //字符串
- // 'dothree':Function, //方法
- // 'home':Object, //对象
- // 'propB': [String, Number], 多个可能的类型
- // 'm':{ //这就牛逼了 还可以设置默认值
- // type: Number,
- // default: 100
- // },
- // }
- ,methods:{
- abc(){
- // 既然可以整个实例传过来,那在子组件中就这么接收
- alert(this.home.mvc)
- // 使用方法
- this.home.doone()
- }
- }
-
- };
- </script>
- <style>
- </style>
复制代码
最后聊聊这个 props 的验证问题:
视频里说这玩意没啥用, 我个人觉得——尼玛报错报控制台有个鬼用啊; 不过默认值还不错
|
|